Scenario
app.controller('headerController', ['$scope', '$routeParams', function($scope, $routeParams) {
$scope.data = $routeParams;
}]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/:url', {
template: '<h2>Greetings Earthling</h2>'
})
}]);
Format
<body>
<div ng-controller="headerController">
Current URL: {{data.url}}
</div>
<div ng-view></div>
<ul>
<li>
<a href="#/pageX">Page X</a>
</li>
<li>
<a href="#/pageY">>Page Y</a>
</li>
</body>
Dilemma
I am grappling with the issue of keeping the header section updated with the current url whenever the route is altered. It functions correctly upon initial loading but fails to update when a new route is selected.
While I acknowledge alternative solutions exist, my query centers on resolving this challenge within the confines of the existing setup. How can I ensure that a controller external to a view reflects the current route and automatically updates with each change in the route?