Add Delay in angularjs

Updated:

This problem can easily be solved by using resolve property of $routerProvider. Please use this config. So here the route /ed will not load until the resolve is completed, meaning the http request must return a value, only after that the page will load.

app.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
    var settings.WebApiBaseUrl =  "some url you want to use";
    $routeProvider.when("/al", { templateUrl: "Views/test.html", controller: "testCtrl" })
  .when("/ed", { 
    templateUrl: "Views/test2.html", 
    controller: "test2Ctrl",
    resolve: {
        initialize: function($http, $sessionStorage){
            $http.get('api/ApiKey/' + $sessionStorage.user)
          .success(function (myKey) { 
            return $http.get(settings.WebApiBaseUrl + 'Api/test1', { headers: { 'X-ApiKey': myKey } })
            .success(function (data) { 
              return data; 
            }).error(function (data, status, headers, config) { 
              alert("error" + status);
            });
          }).error(function (data, status, headers, config) { 
             alert("error" + status);
          }); 
        }
    }
  })
  .otherwise({ 
    redirectTo: '/al' 
  }); 
}]);

Now in the controller you need to do.

app.controller( 'test2Ctrl', function ( $scope, initialize ) {
        $scope.loading=false;
        $scope.test1=initialize;
        $scope.loading=true;
});

Old Answer: so you have a http request which is a promise and will wait until the data is received and from your example I can see you are implementing a loading screen kind of thing until the http request is completed.

To ensure the bulky http request doesn't time out you can use.

angular.module('MyApp', [])
  .config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.timeout = 5000;
}]);

While the page waits for the http request to complete you can use the scope variable($scope.loading = true;) to activate a loading spinner library to mask your page. Checkout angular loading overlay or some other code to do this.

Reference: http timeout