角型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' 
    }; 
}); 

そして今、すべてが