Estou tentando alternar (ocultar / mostrar) um gif de carregamento em cada nova rota, para que minha lógica seja:

routeChangeStart = show loading gifrouteChangeSuccess = ocultar o carregamento do gif

Este é o meu código:

//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"/>

é estranho porque isso funciona para 3/4 de rotas alteradas, então ele pára de funcionar enquanto altera as rotas: O

o que poderia ser?

AQUI ESTÁ UM EXEMPLO AO VIVO graças a @Rob Sedgwick:http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b