AngularJS: Alterar o título com base na rota

AngularJS é usado para construir WebApps de página única. Pela sua natureza, você terá apenas 1 Título para sua página, então mesmo que vá para ‘/ produto’ ou ‘/ sobre’, você verá o mesmo Título no Navegador. Não é muito amigável …

Onde está uma solução possível para esse problema.

Em seu HTML, altere a tag de título para incluir um ng-bind :

<title ng-bind="'MyApp - ' + $root.title">MyApp - Welcome</title>

Em seu app.js:

$routeProvider
      .when('/product', {templateUrl: '/partials/product.html',  controller: 'ProductCtrl', title: 'Discover our Product'})
      .when('/about', {templateUrl: '/partials/about.html', controller: 'AboutCtrl', title: 'About US'});

em seu run (), adicione um $ rootScope. $ em:

$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
    //Change page title, based on Route information
    $rootScope.title = $route.current.title;
  });

Observação: o motivo pelo qual estou usando ng-bind em vez do vínculo do modelo angular ‘{{expression}}’ está expresso na documentação:

É preferível usar ngBind em vez de {{expression}} quando um modelo é momentaneamente exibido pelo navegador em seu estado bruto antes de o Angular o compilar.