javascript - AngularJS directive will only work until ng-include changes -

i have angularjs directives work once. when view changes , return no longer work, there no page refresh involved, use simple view loading system using ng-include page changes (sub pages not main routes).

i have markup this.

<div class="row" ng-controller="mainctrl">     <ul class="sidebar span3" sub-nav>         <li><a ng-click="changepage('users')">users</a></li>         <li><a ng-click="changepage('posts')">posts</a></li>     </ul>     <div class="span9" view-partial ng-include="route[active]"></div> </div> 

the "sub-nav" directive has method update "active" scope variable. have directive listens changes "active" variable , emits "pagechange" event if value different. (they separate controller applied more one). there 1 controller running code @ time , seems work perfectly.

inside ng-include using ng-repeat loop on data, in table loop produces have delete button directive applied one

angular.module("mymodule")      .directive("deletebtn", function(delconf) {         require: "?ngmodel",         link: function(scope, elm, attr, ngmodel) {             elm.bind("click", function(e) {                 // here open modal window , pass data                 // delete confirmation logic tucked                  // away in delconf             }         }     })      .directive("deleteconfbtn", function(delconf) {         require: "?ngmodel",         link: function(scope, elm, attr, ngmodel) {             elm.bind("click", function(e) {                 // here make api request delete item , remove                 // scope             }         }                 }); 

the first directive applied delete button in table (this 1 work, when view changes). second directive applied button on bootstrap modal window.

the second directive work after page refresh. think scope can't figure out why 1 works , other fails.

any appreciated.