[解決済み] angularjsでクリックされた要素にアクセスする

質問

AngularJSは比較的初心者で、コンセプトを把握できていないのではないかと思っています。また、Twitter Bootstrapを使用しており、jQueryも読み込んでいます。

作業の流れ ユーザーがリストのリンクをクリックすると、quot;master"セクションが更新され、ユーザーがクリックしたリンクがアクティブクラスを獲得する。

HTMLの基本的なマークアップ。

<ul class="list-holder" ng-controller="adminController">
   <li><a ng-click="setMaster('client')">Clients</li>
   <li><a ng-click="setMaster('employees')">Employees</li>
   <li><a ng-click="setMaster('etc')>Etc...</li>
</ul>

jQueryで行う。

jQuery(".list-holder").on('click', 'a', function(event){
    event.preventDefault();
jQuery(".list-holder li").removeClass('active');
jQuery(this).parent('li').addClass('active');
});

しかし、AngularとjQueryを統合してこれを実現する方法がわかりません。Angularを使って、マスターリスト（JSON形式）をサーバーから取得し、ページ上のリストを更新しているからです。

どのように統合すればよいのでしょうか？アンギュラーコントローラの関数内に入ると、クリックした要素が見つからないようです。

コントローラーです。

function adminController($scope)
    {    
        $scope.setMaster = function(obj)
        {
            // How do I get clicked element's parent li?
            console.log(obj);
        }
    }

解決方法は？

AngularJSでは、以下の構文でクリックイベントを把握することができます（つまり、そのターゲットになることができます）。 $event 引数に setMaster 関数のドキュメントはこちらです。 http://docs.angularjs.org/api/ng.directive:ngClick ):

function AdminController($scope) {    
  $scope.setMaster = function(obj, $event){
    console.log($event.target);
  }
}

というのは、この問題を解決する方法としては、あまりアンギュラー的ではありません。AngularJSでは、モデル操作に焦点が当てられています。モデルを変更し、レンダリングはAngularJSに任せます。

この問題を解決するためのAngularJSの方法（jQueryと を渡す必要がない。 $event 引数 )となる。

<div ng-controller="AdminController">
    <ul class="list-holder">
        <li ng-repeat="section in sections" ng-class="{active : isSelected(section)}">
            <a ng-click="setMaster(section)">{{section.name}}</a>
        </li>
    </ul>
    <hr>
    {{selected | json}}
</div>

で、コントローラ内のメソッドはこのようになります。

$scope.setMaster = function(section) {
    $scope.selected = section;
}

$scope.isSelected = function(section) {
    return $scope.selected === section;
}

以下は、jsFiddleの完成形です。 http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/