Angularjs $location.path('...') doesn't work

Question

I'm working on authentication with angularjs, so after connecting my user I want to redirect him to the home page:

$scope.submit = function(user) {
    var request = {
        method: 'POST',
        url: 'http://localhost:9001/signIn',
        headers: {
            'Content-Type': 'application/json'
        },
        data: {
            "email": user.email,
            "password": user.password,
            "rememberMe": true
        }
    };
    $http(request).then(function(data) {
            $location.path('/home');
    }, function(error) {
        console.log(error);
    });
};

here is my configuration:

app.config(function($urlRouterProvider, $stateProvider, $httpProvider, $authProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: '/home',
            controller: 'HomeCtrl',
            resolve: {
                authenticated: function($q, $location, $auth) {
                    var deferred = $q.defer();

                if (!$auth.isAuthenticated()) {
                    $location.path('/signIn');
                } else {
                    deferred.resolve();
                }

                return deferred.promise;
            }
        }
    })
    .state('signIn', {
        url: '/signIn',
        templateUrl: '/signIn',
        controller: 'SignInCtrl'
    });
});

I tried this:

    $http(request).then(function(data) {
        $scope.$evalAsync(function() {
            $location.path('/home');
        });
        console.log(data);
    }, function(error) {
        console.log(error);
    });

also :

$location.path('/home');
$location.replace();

Neither of the above work, any help is greatly appreciated.

Answer 1

The home state resolver function fails to resolve or reject the $q.defer promise when $auth.isAuthenticated() returns false. This will cause the promise to hang and create a memory leak.

//ERRONEOUS CODE
$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: '/home',
        controller: 'HomeCtrl',
        resolve: {
            authenticated: function($q, $location, $auth) {
                var deferred = $q.defer();

            if (!$auth.isAuthenticated()) {
                $location.path('/signIn');
                //FAILS to resolve or reject promise
            } else {
                deferred.resolve();
            }

            return deferred.promise;
        }
    }
})

Instead return a rejection when not authenticated:

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: '/home',
        controller: 'HomeCtrl',
        resolve: {
            authenticated: function($q, $location, $auth) {
                //var deferred = $q.defer();

                if ($auth.isAuthenticated()) {
                    return $q.resolve("AUTHENTICATED");
                };

                //otherwise
                return $q.reject("NOT AUTHENTICATED");
            })
        }
})

When a resolver function returns a rejected promise, the state change will be prevented and the $stateChangeError event will be broadcast on $rootScope.