UI Route loading spinner doesn't work without $timeout
<p>I have an angular app using UI Router. I have subscribed to the $stateChangeStart and $stateChangeSuccess events and I'm using an ng-show directive to show/hide a controller property for "isLoading" for a loading indicator <strong><em>outside</em></strong> of the ui-view tag. I can debug through the code and see that the events are firing and the variables are being set in JS, but it seems that between the start and success events, the DOM is never updated and so my loading indicator never shows. The only way I could get the loading indicator to show up is to add a $timeout of 0 seconds and do the variable update there.</p>

<pre><code>$rootScope.$on("$stateChangeStart", function() {
    ctrl.isLoading = true;
});
$rootScope.$on("$stateChangeSuccess", function(ev, to, toParams, from, fromParams) {
    $timeout(function() {
      ctrl.isLoading = false;
    }, 0);
});
</code></pre>

<p>This JSFiddle <a href="http://jsfiddle.net/uwhetx7q/2/" rel="nofollow">http://jsfiddle.net/uwhetx7q/2/</a> demonstrates what I am struggling with. </p>

<p>When the $timeout is being applied, even at 0 seconds, the loading indicator flashes. But without it, my variable is never $apply'd.</p>

<p>I tried actually calling $apply and $digest, but I get the error that those methods are already in progress.</p>

<p>I am hoping there is something super obvious that I am missing that would get my loading indicator to show because an empty $timeout is a bad solution :)</p>

<p>Thanks!</p>