AngularJS $location does not get updated

Question

I am new to AngularJS and I apologize if this is a stupid question. I am struggling for days now and just can't get my head around it.

I have an application with a main controller and three partials with their own controllers. Everything works fine, except that the $location in the main controller does not change when the user navigates to a view. But the browser always shows the correct URL.

sdsApp.controller('mainCtrl', ['$location', function($location) {
    var self = this;
    self.url = $location.absUrl();
}]);

However, the controller of the partial will always return the correct current location:

sdsApp.controller('homeCtrl', ['$location', function($location) {
    var self = this;
    self.url = $location.absUrl();
}]);

Here is the plunker with the full example

Answer 1

I found the solution: the main controller has to listen for the event $locationChangeSuccess and then just read $location.absUrl().

myApp.controller('mainCtrl', ['$scope','$location', function($scope, $location) {
var self = this;

$scope.$on('$locationChangeSuccess', function(event) {
    self.url = $location.absUrl();
});

}]);