[解決済み] Angular JSでブートストラップナンバーアクティブクラスを設定する方法は？

質問

bootstrapでナビバーを作成する場合、項目は以下のようになります。

Home | About | Contact

各メニュー項目がアクティブになったときに、アクティブクラスを設定するにはどうしたらよいですか？つまり class="active" にあるとき、アンギュラールートは

1. #/ 家庭用
2. #/about アバウトページ用
3. #/contact お問い合わせページ用

解決するには？

非常にエレガントな方法は、ng-controllerを使用して、ng-viewの外側で単一のコントローラを実行することです。

<div class="collapse navbar-collapse" ng-controller="HeaderController">
    <ul class="nav navbar-nav">
        <li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>
        <li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li>
        <li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li>
    </ul>
</div>
<div ng-view></div>

を作成し、controllers.jsにインクルードします。

function HeaderController($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
}