How do I apply state transition inside AngularJS $rootScope event listeners?
<p>I am currently facing a problem in using <a href="https://github.com/witoldsz/angular-http-auth" rel="nofollow">angular-http-auth</a> library which is handling a state transition from events of <strong>event:auth-loginRequired</strong>. I am using <a href="https://github.com/angular-ui/ui-router" rel="nofollow">angular-ui-router</a> for my routing systems.</p>

<p>Anyway here's some pieces of code from the library that emit the events :</p>

<pre><code>case 401:
    var deferred = $q.defer();
    httpBuffer.append(config, deferred);
    $rootScope.$broadcast('event:auth-loginRequired', rejection);
    return deferred.promise;
</code></pre>

<p>And I was catching the events with these pieces of codes inside <strong>myApp.run</strong></p>

<pre><code>$rootScope.$on('event:auth-loginRequired', function(){
    console.log('Token Invalid / Expired');
    $state.transitionTo('login');
});
</code></pre>

<p>I was able to get the <strong>'Token Invalid / Expired'</strong> inside my console. However, the state transition didn't work at all and I didn't get any errors on my console too. I've tried using <strong>$location.path('/login')</strong>, but it doesn't work too. </p>

<p>Can anyone please help me with the solutions? Any kind of help is really appreciated. Thanks!</p>