title: Angularjs: How to prevent creating multiple event listener on controller refresh
body: <p>I have a <strong>controller</strong> like this:</p>
  
  <pre><code>myApp.controller('loginCtrl', ['$scope', '$rootScope', '$http', '$location', function($scope, $rootScope, $http, $location){
  
      console.log('check 1');
  
      // before route update
      //---------------------------------------------------------
      $rootScope.$on('$locationChangeStart', function(event){
          if($location.path() == "/login"){
              console.log('check 2');
          }
      });
  
  }]);
  </code></pre>
  
  <p>First time <code>check 1</code> will be logged and When i click on <code>/login</code> link, <code>check 2</code> will be logged. everytime i change path to /home and /login, i expect a new <code>check 2</code> on console but  what i see <strong>in console</strong> is like this:</p>
  
  <pre><code>check 2 (1 time)
  check 2 (2 times)
  check 2 (3 times)
  check 2 (4 times)
  ...
  </code></pre>
  
  <p>this means by every location change, angularjs creates a new listener and number of <code>check 2</code>'s increases!
  Is there a <strong>standard</strong> way for listening on location change without this issue? or should i remove my listener before leaving <code>/login</code> page?</p>
  
  <hr>
  
  <p><strong>OTHER FILES</strong></p>
  
  <p><strong>my app.js file:</strong></p>
  
  <pre><code>...
  when('/login', {
    templateUrl: 'page/login.html', 
    controller: 'loginCtrl', 
    reloadOnSearch: false
  })
  ...
  </code></pre>
  
  <p><strong>login template:</strong></p>
  
  <pre><code>&lt;section class="login-page section"&gt;
      &lt;h3&gt;Login&lt;/h3&gt;
      ...
  &lt;/section&gt;
  </code></pre>