angular-ui/ui-router $stateChangeError never fires for a state that does not exist

Question

My issue is that ui-router $stateChangeError is not triggered by a "404" invaild state.

I know for sure that my on $stateChangeSucess fires correctly:

$rootScope.$on('$stateChangeSuccess', 
        function(event, toState, toParams, fromState, fromParams)

When I intentionally make an invalid state like so:

 <ui-view>
    <a ui-sref="foo" style="cursor: pointer;">Foo is not a state</a>
 </ui-view>

The $stateChangeError event is not fired, I know I have the correct signature

angular
    .module('blocks.router')
    .run(['$rootScope', function($rootScope) {
        $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
            console.log('$stateChangeError fired!');
        });
    }]);

And I add my function to $stateChangeError at the same time I add my working $stateChangeSuccess.

Any suggestions to what I might be doing wrong?

Answer 1

Angular-ui-router has $stateNotFound for such case