angularjs - ng-repeat によって作成されたボタンのリストについては、ng-show/ng-hide を ng-click してください

Question

ng-repeat によって作成された再生/一時停止ボタンのリストがあります。各再生ボタンをクリックして曲をストリーミングすると、ボタンが一時停止ボタンに変わります (一時停止できるようになります)。ボタンとクリック イベントを正しく設定できましたが、1 つの再生ボタンをクリックすると、すべてのボタンが一時停止ボタンに変わるという問題が発生しました。

私は（私が思うに）これが起こっている理由を理解しています.ng-show変数（visible）が変更されているため、それらすべてに影響します.

これに関する他の同様の回答（ng-repeat ng-show dilemna）を読みましたが、レッスン（$ indexの使用など）を私の例に適用できませんでした。また、多くの例とフィドルでは、クリックした div を使用して、次のような処理show = !showを行い、次に "loading..." を表示します。

私のはちょっと違うと思います。

これが私のhtmlです：

<div class="nav nav-stacked list-group-item" id="sidebar" ng-repeat="show in shows"> 

                <div class="media col-md-3">

                    <img class="media-object img-rounded img-responsive" src="/images/play_button.png" alt="playbutton" height="40px" width="40px" ng-click="streamTrack(show.stream_url)" ng-show="visible">
                    <img class="media-object img-rounded img-responsive" src="/images/pause_button.png" alt="playbutton" height="40px" width="40px" padding-right="5px" ng-click="pauseTrack(sound)" ng-hide="visible">

                </div>
        </div>

私のコントローラーの関連部分は次のとおりです。

$scope.visible = true;

$scope.streamTrack = function (stream_url) {
    SC.stream(stream_url, function (sound) {
    $scope.sound = sound;
    sound.play();
    });

    $scope.visible = false;

};

$scope.pauseTrack = function (sound) {
    sound.pause();
    $scope.visible = true;
};

これを処理するにはどのような方法がありますか? 1 つの再生ボタンをクリックすると、再生ボタンだけが非表示になり、そのボタンだけの一時停止ボタンが表示されます。おそらく $index または Parentindex の何かだと思いますが、数時間いじって読んだ後でも、まだ近づいていません。