Authorization with Angular/UI Router when user directly access a route by url

Question

So I've followed most of the concepts presented in this well written blog: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

In my .run() function I have the following

        $rootScope.$on('$stateChangeStart', function (event, next) {
            if (!!next.data) {
                var authorizedRoles = next.data.authorizedRoles;
                if (!AuthService.isAuthorized(authorizedRoles)) {
                    event.preventDefault();
                    if (AuthService.isAuthenticated()) {
                        // user is not allowed
                        $rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
                    } else {
                        // user is not logged in
                        $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
                    }
                }
            }
        });

I have also added a resolver to a state called "mypages", that requires the user to have the proper authorization:

.state('mypages', {
                        url: '/mypages',
                        resolve: {
                            auth: function resolveAuthentication(AuthResolver) {
                                return AuthResolver.resolve();
                            }
                        },
                        data: {
                            authorizedRoles: [USER_ROLES.user]
                        },
                        <more code...>

AuthResolver.resolve() looks like this:

.factory('AuthResolver', ['$q','$rootScope','$state', function ($q, $rootScope, $state) {
    return {
        resolve: function () {
            var deferred = $q.defer();
            var unwatch = $rootScope.$watch('currentUser', function (currentUser) {
                if (angular.isDefined(currentUser)) {
                    if (currentUser) {
                        deferred.resolve(currentUser);
                    } else {
                        deferred.reject();
                        $state.go('user-login');
                    }
                    unwatch();
                }
            });
            return deferred.promise;
        }
    };
}])

My problem now is that if I try to access mypages directly (myhost.com/#/mypages) $stateChangeStart seems to fire BEFORE the resolver. So basically when the check is performed, the auth has not been resolved yet, it is called and resolved AFTER the $stateChangeStart. This is probably all as it is supposed to be.

Question: What changes do I need to make in order for the user state to have been resolved before the $stateChangeStart is fired when a user directly tries to access a specific state?