AngularJSを使ってブートストラップのナビゲーションバーにアクティブクラスを設定したい

Question

アイテムのあるブートストラップ中にナビゲーションバーがあるとします。

Home | About | Contact

メニューアイテムがアクティブなとき、各アイテムにアクティブクラスを設定するにはどうすればいいでしょうか?
（angularルートが以下の3パターンの場合、class="active"をどう設定すればいいですか?）

Home：#/

About：#/about

Contact：#/contact

分かる人、教えて下さい。

Answer 1

ng-controllerを使ってng-viewの外側でコントローラーを走らせればOKです。

<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('/about')}"><a href="/about">About</a></li>
<li ng-class="{ active: isActive('/contact')}"><a href="/contact">Contact</a></li>
</ul>
</div>
<div ng-view></div>

さらに、app.jsに以下をインクルードしてください。

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