Name the page using Angular and UI-Router based on data in the controller

Question

I am currently using the directive found in this question to change the page names.

Set page title using UI router

Then, in my app.js file, I add pageTitle to the data, for example:

.state('home', { url: '/home' templateUrl: 'home.html' controller: 'homeController' data: { pageTitle: 'Home' } }) 

But let's say, for example, if homeController has the $scope.todaysDate variable retrieved from the service. Is there a way to access this variable in my router, so I can change the data and pageTitle to something like:

 data: { pageTitle: 'Home ' + $scope.todaysDate } 

I can log in to the controller and use $rootScope.pageTitle = 'some value' , I see that it changes the variable to 'some value' when I look in the Batarang console tool, but the actual page name does not change.

Answer 1

Perhaps in this case resolve will work. If you want to make sure that some data is always available for the state controller, you can use a solution. For example, let's say I had a service called a calendar, and it gives the getTodaysDate function. I could do the following:

 .state('home', { url: '/home', templateUrl: 'home.html', controller: 'homeController', resolve:{ pageTitle: function(calendar){ return 'Home ' + calendar.getTodaysDate(); } } }) 

Now the "pageTitle" will be enabled and entered into the "homeController" until the state changes. Hope this helps.