jquery - Angular: クリックされた要素のデータが読み込まれたブートストラップ モーダルを読み込む

Question

サービスから表示するアイテムのリストがあり、ng-repeat を使用してデータを表示します。これらのアイテムのいずれかについて、クリックされたアイテムのデータで満たされたブートストラップモーダルを開くことができるようにしたいと思います (このアイテムの範囲内)。

myApp.directive('openmodal', function(){
    return {
        link: function(scope, element, attrs){
            element.on('click', function(){ 
                $(element.attr('href')).modal();
            });
        }
    }
});

ここに私のコードのjsfiddle.net http://jsfiddle.net/echTw/2/

現時点では、ブートストラップ モーダルは、JSON の最初のオブジェクトからのデータのみを表示します。ブートストラップモーダルを実行して、クリックされた要素の範囲内でデータをロードするにはどうすればよいですか (Angular には this.$ に似たものがありますか?)

編集

いいえ、角度ストラップは使用していません。ディレクティブを使用して、提案どおりにスコープを分離しようとしましたが、ライトボックスにはまだ最初の要素からのデータのみが表示されます (理由は不明です)。

そこで、コントローラーである ng-click を使用するようにコードを更新し、動的 ​​ID をモーダルに追加して問題を修正しました。

HTML

<a ng-click="show(task.id)">Show lightbox</a>

角度

function TaskController($scope, Data){
    $scope.data = Data;

    $scope.show = function(e){
        $('#myModal_'+e).modal();
        console.log('#myModal_'+e);
    }
}