Set Page title using UI-Router

Use $stateChangeSuccess.

You can put it in a directive:

app.directive('updateTitle', ['$rootScope', '$timeout',  function($rootScope, $timeout) {    return {      link: function(scope, element) {        var listener = function(event, toState) {          var title = 'Default Title';          if (toState.data && toState.data.pageTitle) title = toState.data.pageTitle;          $timeout(function() {            element.text(title);          }, 0, false);        };        $rootScope.$on('$stateChangeSuccess', listener);      }    };  }]);

And:

<title update-title></title>

Demo: http://run.plnkr.co/8tqvzlCw62Tl7t4j/#/home

Code: http://plnkr.co/edit/XO6RyBPURQFPodoFdYgX?p=preview

Even with $stateChangeSuccess the $timeout has been needed for the history to be correct, at least when I've tested myself.

Edit: Nov 24, 2014 - Declarative approach:

app.directive('title', ['$rootScope', '$timeout',  function($rootScope, $timeout) {    return {      link: function() {        var listener = function(event, toState) {          $timeout(function() {            $rootScope.title = (toState.data && toState.data.pageTitle)             ? toState.data.pageTitle             : 'Default title';          });        };        $rootScope.$on('$stateChangeSuccess', listener);      }    };  }]);

And:

<title>{{title}}</title>

Demo: http://run.plnkr.co/d4s3qBikieq8egX7/#/credits

Code: http://plnkr.co/edit/NpzQsxYGofswWQUBGthR?p=preview

There is a another way of doing this by combining most of the answers here already. I know this is already answered but I wanted to show the way I dynamically change page titles with ui-router.

If you take a look at ui-router sample app, they use the angular .run block to add the $state variable to $rootScope.

// It's very handy to add references to $state and $stateParams to the $rootScope// so that you can access them from any scope within your applications.// For example, <li ng-class="{ active: $state.includes('contacts.list') }"> // will set the <li> to active whenever 'contacts.list' or one of its // decendents is active..run([ '$rootScope', '$state', '$stateParams',function ($rootScope, $state, $stateParams) {  $rootScope.$state = $state;  $rootScope.$stateParams = $stateParams;}])

With this defined you can then easily dynamically update your page title with what you have posted but modified to use the defined state:

Setup the state the same way:

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

But edit the html a bit...

<title ng-bind="$state.current.data.pageTitle"></title>

I can't say this is any better than the answers before... but was easier for me to understand and implement. Hope this helps someone!

The angular-ui-router-title plugin makes it easy to update the page title to a static or dynamic value based on the current state. It correctly works with browser history, too.