title: Event listeners fired multiple times from same directive
body: <p>In my app I am using a custom directive with a window resize event listener:</p>
  
  <pre><code>link: function(scope, elem, attrs) {
      angular.element($window).bind('resize', function() {
          // viewId is a unique reference to the view in which the directive lives
          console.log(scope.viewId);
      });
  }
  </code></pre>
  
  <p>This directive is inserted 1 or multiple times in each of my views.</p>
  
  <p>What puzzles me is why the function is executed not only for the active view, but also for inactive ones. This happens once I have accessed more than one view.</p>
  
  <p>What puzzles me even more, is why the function is called multiple times from the same view, after I have visited the same view multiple times.</p>
  
  <p>It seems to me that the old directive scope is not destroyed, but kept alive and a new scope is created on top of the old one.</p>
  
  <p>Is there anything I can do to prevent this behavior?</p>
  
  <hr>
  
  <p>Below a code snippet of the working solution based on the answer provided by Renan Lopes Ferreira (I am using LoDash _.debounce to prevent the function being called too often):
      </p>
  
  <pre><code>windowResize = _.debounce(function () {
      // My logic
      $scope.$apply();
  }, 150);
  
  // Attach debounced function to the window.resize event listener
  angular.element($window).on('resize', windowResize);
  
  // Remove the function when the directive is destroyed
  $scope.$on('$destroy', function () {
      angular.element($window).off('resize', windowResize);
  });
  </code></pre>