AngularJS $location.path() not reloading data of the destination view

Question

In my angular project, when changing the path with $location.path('/foobar') the destination view is displayed but the data aren't reloaded (typically after saving an item and going back to the list, the list is not updated).

I tried to add $route.reload() or $scope.apply(), but nothing change.

I don't know what's wrong or missing to make this work.

UPDATE

• $location.url() doesnt' work either
• I'm using angular 1.2.26

UPDATE 2 - ANSWER

Ok, after a lot of comments and answers, I think it's time to end this.
I didn't think it would have been a so complicated question.

So, my conclusion, giving all you said is :

• Giving simple example of @yvesmancera, the default behavior of the controller is to reload itself
• In a complex controller with a resource factory and some REST calls, any save or update action should also manually update the list reference, or trigger a full reload of the list

All of you gave me some good advices, so thank you.

Answer 1

I had the same problem just yesterday, if you try to navigate to the same path you're already in, angular won't try to reload the view and controller. What fixed it for me is appending a "/" at the end of each route in $routeProvider, e.g:

$routeProvider
  .when('/', {
    templateUrl: 'views/home.html',
    controller: 'HomeCtrl'
  })
  .when('/About/', {
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl'
  })
  .when('/Contact/', {
    templateUrl: 'views/contact.html',
    controller: 'ContactCtrl'
  })

Edit

Here is a working plunkr with angular 1.2.26

http://plnkr.co/edit/jkGKKCp0djN6Jvy2fIRd?p=preview

Answer 2

Use $window.location.href. to reload the page. I just check on $location document:

Page reload navigation

The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API, $window.location.href.

Example:

$window.location.href = "/your/path/here";

Answer 3

Pseudo Code:-

    app.controller('myController', ['$scope', '$location','$http', 'ItemListService'
                    function($scope, $location, $http, ItemListService){
       $scope.data = function(){
       ItemListService.getAllItems(); //get all the items;
    };
        $scope.saveMethod = function(item){
       $scope.data = ItemListService.save(item); //this is the refresh part, return data through save method. Pull the latest data and bind it to the scope.
         $location.path('/fooView'); //dont think you even need this if you are entering data in a modal sorta thing, which on the same view. 
    }
    }]);

You service should look like,

app.service('ItemListService', function(){
    this.getAllItems = function(){
      //get the items from itemList
     //return all the items
   }

  this.save = function(item){
     //save the item in itemList
     //**return all items again, call getAllItems here too.
}
});

Hope this helps!!

Answer 4

You can switch https://github.com/angular-ui/ui-router it has method $state.reload() which can re-initialize whole controller.

If you dont want to switch ther is problem that controller is still living but you can implement after save

$rootScope.$broadcast('data:updated', $scope.data);

then wrap method of loading data in controller to function and then you can push new data to existing list / or make ajax reload

$rootScope.$on('data:updated',function(listener,data) {
 $scope.data.push(data);
});

$rootScope.$on('data:updated',function()
{
   callAjax.then(function(data) {
     $scope.data = data;
   }
});

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on