title: AngularJS: bind scroll event to one controller not all
body: <p>Consider I have 100 controllers and I need to <code>bind</code> a <code>scroll</code> event to one of them.</p>
  
  <p>When the controller fired, the scroll event listener attached to document and work correctly. but when the controller change, the scroll event remain &amp; cause problem in other controller!</p>
  
  <p>The only solution I find is that <code>unbind</code> the <code>scroll</code> event in all of other 99 controllers but it is stupid!</p>
  
  <pre><code>angular.module('test', ['ngRoute'])
  .config(function($routeProvider){
      $routeProvider
          .when('/c1', {controller:'c1', templateUrl:'/c1.html'})
          .when('/c2', {controller:'c2', templateUrl:'/c2.html'})
          ...
          .when('/c100', {controller:'c100', templateUrl:'/c100.html'})
          .otherwise({redirectTo: '/c1'});
  })
  .controller('c1', function($document){
      ...
      $document.bind('scroll', function(){...});
      ...
  })
  .controller('c2', function($document){
      $document.unbind('scroll');
      ...
  })
  ...
  .controller('c100', function($document){
      $document.unbind('scroll');
      ...
  })
  </code></pre>
  
  <p>What is the right way?</p>