title: Angular js - show/hide loading gif every new route
body: <p>I'm trying to toggle (hide/show) a loading gif on every new route, so my logic would be:</p>
  
  <ul>
  <li>routeChangeStart = show loading gif </li>
  <li>routeChangeSuccess = hide loading    gif</li>
  </ul>
  
  <p>This is my code:</p>
  
  <pre><code>//ANGULAR
  app.run(function($rootScope) {
  
     $rootScope.layout = {};
     $rootScope.layout.loading = false; 
  
     $rootScope.$on('$routeChangeStart', function() {
  
        //show loading gif
        $rootScope.layout.loading = true;
  
     });
  
     $rootScope.$on('$routeChangeSuccess', function() {
  
        //hide loading gif
        $rootScope.layout.loading = false;
  
     });
  
     $rootScope.$on('$routeChangeError', function() {
  
         //hide loading gif
         alert('wtff');
         $rootScope.layout.loading = false;
     });
  });
  </code></pre>
  
  <p>//HTML</p>
  
  <pre><code>&lt;img src="img/loading.gif" ng-hide="!layout.loading"/&gt;
  </code></pre>
  
  <p><strong>it is strange cause this works  for 3/4 routes changed then it stop working while changing routes :O</strong></p>
  
  <p>what it could be?</p>
  
  <p>HERE IS A LIVE EXAMPLE thanks to @Rob Sedgwick : <a href="http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b">http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b</a></p>