Is it possible to dynamically change the title displayed in a header based on the current route provided by the router, even when outside of the controller scope? For example, I have a mainMenu controller that is loaded when a specific route is called. The header, which is included as a partial outside of the view, should reflect this current route. Below is the code structure for reference:
index.html
<div ng-include="'partials/header.html'"></div>
<div ng-view></div>
/partials/header.html
<header ng-controller="HeaderCtrl">
<h1>{{ currentTitle }}</h1>
</header>
/partials/main-menu.html
<div ng-controller="MainMenuCtrl">
</div>
Router
var TaskApp = angular.module('TaskApp', [
'ngRoute',
'taskAppControllers'
]);
TaskApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/main-menu', {
templateUrl: "partials/main-menu.html",
controller: "MainMenuCtrl"
}).
otherwise({
redirectTo: "/"
});
}]);
Controllers:
var taskAppControllers = angular.module('taskAppControllers',[]);
taskAppControllers.controller('TaskAppCtrl',[function(){}]);
taskAppControllers.controller('DesktopCtrl',[function(){}]);
taskAppControllers.controller('MainMenuCtrl', ['$scope','$http',
function($scope, $http){
$http.get('data/main-menu.json?' + Math.random()).success(function(data){
$scope.mainMenuOptions = data;
});
$scope.currentTitle = "Main menu"
}]);
taskAppControllers.controller('HeaderCtrl', ['$scope',
function($scope){
//
}]);