Angular filter on select menu disables buttons in filtered element directives

Question

I have an angular app running from a hosted service. The issue I'm having is a relatively small one but frustrating nonetheless.

I have a set of custom directives loaded into the page with ng-repeat and a filter based on the value of a select element using ng-model. It mostly works fine.

In the element directives I also have a 'close' button that removes the element from the page. The issue arises when I change the value of the select menu to show the just closed element. Once the element reappears, the buttons in the element won't fire their callbacks. I thought this had to do with the fact that the link function happens once, but the functionality returns after a few more toggles with the select menu.

If anyone has any insight on this, I would appreciate it. What exactly does filter do when something is removed, or brought back? Why would this cause event handles to not function?

Here's the example.

    angular.module("App",[])
    .directive("test",function(){
      return {
        restrict: 'E',
        scope:{
          name:'@'
        },
        templateUrl:"test.html",
        link: function(scope,element,attrs){
          scope.hide=function(){
             element.remove();
          };
        }
      };
    })
    .controller("AppController",['$scope',function($scope){
   $scope.examples=[
        {
          name:'first'
        },
        {
          name:'second'
        },
        {
          name:'third'
        }
        ];
    }]);

To see the behavior, click hide on any of the elements, then try selecting that element and see that the hide button won't work.