Я пытаюсь переключить (скрыть / показать) загрузочный GIF на каждом новом маршруте, поэтому моя логика будет такой:

routeChangeStart = показать загрузку GIFrouteChangeSuccess = скрыть загрузку GIF

Это мой код:

//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;
   });
});

// HTML

<img src="img/loading.gif" ng-hide="!layout.loading"/>

это странно, потому что это работает для 3/4 измененных маршрутов, затем перестает работать при изменении маршрутов: O

что бы это могло быть?

Вот пример из жизни благодаря @Rob Sedgwick:http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b