angularjs - Self removable directive in angular JS -

i'm trying create application allow me append , destroy repeatable elements, encounter problem.

firstly here directive append elements:

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));         });     }; }); 

and contains div-button:

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

and of course here watcher directive:

myapp.directive('watcher', function() {     return {         controller: function($scope, $element, $attrs, $transclude) {             $scope.remove = function() {                 $element.remove();             }         },         templateurl: 'watcherdirective.html'     }; }); 

the problem can add many of "watchers" can remove last 1 added, , firstly created on page load. missing implementation create opportunity remove every created "watcher" element?

thanks @devqon comment resolved in way:

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

and works