Binding input with directive in AngularJS

I have a directive that appears when an element form an ng-repeat list is clicked on. So far the directive has no toggle, so it only appears when the item is clicked, and destroyed and recreated when another element is clicked.

The problem I'm having is that once I have the ng-repeat list displayed and the user clicks on an element, the directive will appear, but if the user then filters the list, the element binded to the directive will disappear, but the directive will still be there.

I've tried adding a ng-focus="hideVersions = true" in the input that filters, and an ng-hide="hideVersions" in the container wrapping the directive, but so far no luck.

Here's my filter:

<input ng-show="artist.name" ng-model="$parent.album" ng-focus="hideVersions = true" placeholder="Filter by release name""/> 

And the directive:

angular.module('myApp').directive('theDirective', function($http, $compile) {
  return {
    restrict: 'A',
    scope: {
      position: '@',
      last: '@',
      release: '='
    },
    link: function(scope, element, attrs) {
      scope.getVersions = function() {
        $http.get(scope.release.resource_url + '/versions', {ignoreLoadingBar: true}).
        success(function(data5) {
          scope.versions = data5.versions;
        }).
        error(function(){
          $http.get(scope.release.resource_url, {ignoreLoadingBar: true}).
          success(function(data6) {
            scope.singleversion = data6;
          })
        });
      }
      scope.$on('$destroy', function() {
        element.unbind('click');
      });

      element.bind('click', function() {
        // Makes http call to get versions
        scope.getVersions();

        // Highlight clicked element
        angular.element(document.querySelector('.clicked')).removeClass('clicked');
        element.addClass('clicked');
        // Create the collapse element or select existing one

        var collapseQuery = document.querySelector('#collapse');
        if (collapseQuery !== null) 
          angular.element(collapseQuery).remove();

        var collapse = angular.element('<div id="collapse" ng-hide="$parent.hideVersions" class="col-md-12 col-xs-12"> \
              <div class="inner"> \
                <ul> \
                  <li class="title">{{release.title}}</li> \
                  <li class="row top"> \
                    <div class="col-md-1 col-sm-1 col-xs-2">Year</div> \
                    <div class="col-md-3 col-sm-3 col-xs-3">Format</div> \
                    <div class="col-md-3 col-sm-3 col-xs-3">Label</div> \
                    <div class="col-md-2 col-sm-2 col-xs-2">Country</div> \
                    <div class="col-md-2 col-sm-2 hidden-xs">Cat. Nº</div> \
                  </li> \
                  <li class="row" ng-show="versions" ng-repeat="version in versions | filter: \'!file\' | orderBy: \'released\'"> \
                    <div class="col-md-1 col-sm-1 col-xs-2">{{(version.released | release:4) || \'-----\'}}</div> \
                    <div class="col-md-3 col-sm-3 col-xs-3">{{version.format}}</div> \
                    <div class="col-md-3 col-sm-3 col-xs-3">{{version.label}}</div> \
                    <div class="col-md-2 col-sm-2 col-xs-2">{{version.country}}</div> \
                    <div class="col-md-2 col-sm-2 hidden-xs">{{version.catno}}</div> \
                  </li> \
                  <li class="row" ng-hide="!release.format"> \
                    <div class="col-md-1 col-sm-1 col-xs-2">{{singleversion.year}}</div> \
                    <div class="col-md-3 col-sm-3 col-xs-4">{{singleversion.formats[0].name}}</div> \
                    <div class="col-md-3 col-sm-3 col-xs-3">{{singleversion.labels[0].name}}</div> \
                    <div class="col-md-2 col-sm-2 col-xs-2">{{singleversion.country}}</div> \
                    <div class="col-md-2 col-sm-2 hidden-xs">{{singleversion.labels[0].catno}}</div> \
                  </li> \
                </ul> \
              </div> \
            </div>')

        // Based on the position of the clicked element calculate the rounded number up to the nearest multiple of four

        if ($(window).width() < 768)
          {
          var calculatedPosition = Math.ceil(scope.position / 2) * 2;
          }
        else
          {
          var calculatedPosition = Math.ceil(scope.position / 4) * 4;
          };

        // Get the element at the calculated position or the last one
        var calculatedQuery = document.querySelector('[position="' + calculatedPosition + '"]');
        if (calculatedQuery === null)
          calculatedQuery = document.querySelector('[last="true"]');

        var calculatedElement = angular.element(calculatedQuery);

        // Insert the collapse element after the element at the calculated position
        calculatedElement.after(collapse);

        // Highlight the calculated element
        angular.element(document.querySelector('.calculated')).removeClass('calculated');
        calculatedElement.addClass('calculated');
        $compile(collapse)(scope);
      });
    }
  };
});

Any tips on how to bind the 2 elements to make the directive disappear (and to remove the "clicked" class from the clicked element)?

Cheers!