javascript - Binding input with directive in AngularJS -

i have directive appears when element form ng-repeat list clicked on. far directive has no toggle, appears when item clicked, , destroyed , recreated when another element clicked.

the problem i'm having once have ng-repeat list displayed , user clicks on element, directive appear, if user filters list, element binded directive disappear, directive still there.

i've tried adding ng-focus="hideversions = true" in input filters, , ng-hide="hideversions" in container wrapping directive, far no luck.

here's filter:

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

and 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 versions         scope.getversions();          // highlight clicked element         angular.element(document.queryselector('.clicked')).removeclass('clicked');         element.addclass('clicked');         // create collapse element or select existing 1          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 position of clicked element calculate rounded number nearest multiple of 4          if ($(window).width() < 768)           {           var calculatedposition = math.ceil(scope.position / 2) * 2;           }         else           {           var calculatedposition = math.ceil(scope.position / 4) * 4;           };          // element @ calculated position or last 1         var calculatedquery = document.queryselector('[position="' + calculatedposition + '"]');         if (calculatedquery === null)           calculatedquery = document.queryselector('[last="true"]');          var calculatedelement = angular.element(calculatedquery);          // insert collapse element after element @ calculated position         calculatedelement.after(collapse);          // highlight calculated element         angular.element(document.queryselector('.calculated')).removeclass('calculated');         calculatedelement.addclass('calculated');         $compile(collapse)(scope);       });     }   }; }); 

any tips on how bind 2 elements make directive disappear (and remove "clicked" class clicked element)?

cheers!

my first tip move javascript html template , specify templateurl in directive.

my second tip @ isolate scopes and/or specifying controller in template html can use angular's directives , bindings in template (instead of relying on jquery-fied js stuffs).