AngularJSでページタイトル（title）の設定
概要
AngularJSのルーティングを利用している場合、ページ毎にタイトル（title）を変更したい時があります。以下はその設定方法になります。
バージョン）
AngularJS 1.3
詳細
◆ 共通ページ（route-test.html）
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="mainCtrl">
<head>
<title ng-bind="title"></title>
<base href="http://xxx.yyy.zzz/">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/route-test.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
4行目の[title]をページ毎に切り替えます。
◆ ルーティング、コントローラーの設定（route-test.js）
myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/top/', {
templateUrl: 'test-top.html',
controller: 'testTopCtrl'
})
.when('/search/', {
templateUrl: 'test-search.html',
controller: 'testSearchCtrl'
})
.otherwise({
redirectTo:'/top/'
});
$locationProvider.html5Mode(true);
}
myApp.controller('mainCtrl', function ($scope) {
$scope.title = "ローディング中 ...";
});
myApp.controller('testTopCtrl', function($scope) {
$scope.$parent.title = "トップページ";
});
myApp.controller('testSearchCtrl', function($scope) {
$scope.$parent.title = "検索ページ";
});
21,25,29行目が[title]の設定。
注意したいのは、25,29行目の「$parent」。[title]を設定するコントローラーは「mainCtrl」なので、「$parent」を指定する必要があります。
また、「$scope.$parent」を使わずに「$rootScope」に設定してもいいかと思います。（むしろ「$rootScope」の方が分かりやすい気がします）
実際に試してみると分かりますが、ルーティングを利用していてページ毎にタイトルを切り替えようとすると、AngularJSのファイルを読み込んで処理されるまで、どうしても最初に[title]という文字列がタイトルに表示されてしまいます。
以下、ページタイトルとして表示される文字列の流れになります。
[title] → ローディング中 ... → トップページ（または検索ページ）
仕組み上、これは仕方がなさそうですね。