$location.path after a certain timeout does not work

Question

i'm trying to perform login auth and i'm trying to show a progress view using angularJS, something like:

app.config(function($locationProvider,$routeProvider) {
    $routeProvider
            .when('/', {
                template: " ",
                controller  : IndexController
            })
            .when('/main', {
                templateUrl : 'views/main.html',
                controller  : MainController
            })
            .when('/login', {
                templateUrl : 'views/login.html',
                controller  : LoginController
            })
            .when('/progress', {
                templateUrl : 'views/progress.html',
                controller  : ProgressController
            })
        });


var logged_in = false;
function IndexController($scope,$location){
    if(logged_in){
        $location.path("/main");
    }else{
        $location.path("/login");
    }
}
function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
function LoginController($scope,$location){
    $scope.username   = "";
    $scope.password   = "";
    $scope.login = function(){
        if($scope.username!="" && $scope.password!=""){
            if(!validateEmail($scope.username)){
                alert("Invalid e-mail!");
            }else{
                $location.path("/progress");
                setTimeout(function(){ // JUST FOR TEST BEFORE ADD AJAX CONTROL
                    logged_in = true;
                    $location.path("/main"); // DOES NOT CALL MainController AND DOES NOT CHANGE TEMPLATE
                },2000);
            }
        }else{
            alert("Username & Password obbligatori!");
        }
    };
    $scope.register = function(){

    };
}
function ProgressController($scope){
    $scope.loading       = true;
} 
function MainController($scope){}

where progress.html contains

<div ng-show="loading" class='loading'>
  <img src='img/loading.gif'>
</div>

Answer 1

I think you should use $timeout

http://code.angularjs.org/1.2.13/docs/api/ng.$timeout

$timeout(function(){ 
  logged_in = true;
  $location.path("/main"); 
},2000);

Of course, it needs to inject $timeout in the controller.

Answer 2

If the problem is only at the block starting with "setTimeout", it's because $location.path is happening outside of Angular scope. Use built-in $timeout service instead of setTimeout or wrap your code in $scope.$apply:

$timeout(function() {
    $location.path("/main")
}, 2000);

Or if your ajax controller comes from outside Angular scope

$scope.$apply(function() {
    $location.path("/main");
});