how to ng-show specific element inside list item on ng-click?

Question

how to show iframe element inside li on ng-click, for just the specific clicked one?
And hide all iframes, using AngularJs.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope, $http, $sce) {
        var indx;
        $scope.PlayFun = function (order) {
            indx = order;
            // I need this fuction because I do a lot of things inside
        };


    });
</script>

---

<div data-ng-app="myApp" data-ng-controller="myCtrl">
    <ul style="list-style-type: none">
        <li data-ng-click="PlayFun($index)" data-ng-repeat="x in records">
            <div data-ng-if="indx === $index">
                <iframe id="video" style="width: 100%; height: 300px;" 
                        data-ng-src="{{videoSource}}" allowfullscreen>
                </iframe>
            </div>
        </li>
    </ul>
</div>

all I need in other words:
I need by clicking li the PlayFun would be executed. and by $index the iframe get displayed.

Answer 1

Instead of assigning the value to indx variable you should create a property in $scope as follows

   $scope.PlayFun = function (order) {
       $scope.indx = order;
   };

We can access the properties and methods of $scope in our HTML.