Самоустанавливающаяся директива в угловом JS

Question

Я пытаюсь создать приложение, которое позволит мне добавлять и уничтожать повторяющиеся элементы, но я сталкиваюсь с проблемой.

Во-первых, здесь моя директива для добавления элементов:

myApp.directive("addWatcher", function($compile){ 
    return function(scope, element, attrs){ 
     element.bind("click", function(){ 
      angular.element(document.getElementById('watchers-space')).append($compile("<Watcher></Watcher>")(scope)); 
     }); 
    }; 
}); 

И он содержит этот Div-кнопки:

 <div ng-click="remove()">X</div> 

И, конечно, здесь есть наблюдающий директива:

myApp.directive('watcher', function() { 
    return { 
     controller: function($scope, $element, $attrs, $transclude) { 
      $scope.remove = function() { 
       $element.remove(); 
      } 
     }, 
     templateUrl: 'watcherDirective.html' 
    }; 
}); 

Проблема в том, что я могу добавить многих «наблюдателей», но я могу удалить только последний добавленный, а также сначала создан на странице e нагрузка. Что мне не хватает в реализации, чтобы создать возможность удалить каждый созданный элемент «Наблюдатель»?

Answer 1

Благодаря @devqon комментарий я решил его таким образом:

myApp.directive('watcher', function() { 
    return { 
     scope: true, 
     controller: function($scope, $element, $attrs, $transclude) { 
      $scope.remove = function() { 
       $element.remove(); 
       $scope.$destroy(); 
      } 
     }, 
     templateUrl: 'watcherDirective.html' 
    }; 
}); 

А теперь все работает