How to reload or re-render the entire page using AngularJS

How to reload or re-render the entire page using AngularJS

After rendering the entire page based on several user contexts and having made several $http requests, I want the user to be able to switch contexts and re-render everything again (resending all $http requests, etc). If I just redirect the user somewhere else, things work properly:
$scope.on_impersonate_success = function(response) {
//$window.location.reload(); // This cancels any current request
$location.path(‘/’); // This works as expected, if path != current_path

$scope.impersonate = function(username) {
return auth.impersonate(username)
.then($scope.on_impersonate_success, $scope.on_auth_failed);

If I use $window.location.reload(), then some of the $http requests on auth.impersonate(username) that are waiting for a response get cancelled, so I can’t use that. Also, the hack $location.path($location.path()) doesn’t work either (nothing happens).
Is there another way to re-render the page without manually issuing all requests again?


Solution 1:

For the record, to force angular to re-render the current page, you can use:


According to AngularJS documentation:

Causes $route service to reload the current route even if $location hasn’t changed.

As a result of that, ngView creates new scope, reinstantiates the controller.

Solution 2:

$route.reload() will reinitialise the controllers but not the services. If you want to reset the whole state of your application you can use:


This is a standard DOM method which you can access injecting the $window service.

If you want to be sure to reload the page from the server, for example when you are using Django or another web framework and you want a fresh server side render, pass true as a parameter to reload, as explained in the docs. Since that requires interaction with the server, it will be slower so do it only if necessary

Angular 2

The above applies to Angular 1. I am not using Angular 2, looks like the services are different there, there is Router, Location, and the DOCUMENT. I did not test different behaviors there

Solution 3:

For reloading the page for a given route path :-


Solution 4:

If you are using angular ui-router this will be the best solution.

$scope.myLoadingFunction = function() {

Solution 5:

Well maybe you forgot to add “$route” when declaring the dependencies of your Controller:

app.controller('NameCtrl', ['$scope','$route', function($scope,$route) {   
   // $route.reload(); Then this should work fine.

Solution 6:

Just to reload everything , use window.location.reload(); with angularjs

Check out working example


<div ng-controller="MyCtrl">  
<button  ng-click="reloadPage();">Reset</button>


var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.reloadPage = function(){window.location.reload();}