How to show specific element in table cells using angularjs - html

Question

Based on my searches when you want to hide the visibility of element in html using angularjs just used ng-show or ng-hide. In my page I have a table generated using ng-repeat.Each row have a button "show check". When the button is clicked the word "CHECK" should display beside the ID. Ng-show is working fine except when I clicked the button in the row with ID 1 all the rows display CHECK the, CHECK word should be display only in a row where I have click the button. What is missing? I try to passed the key parameter but it's not work. Any advice and suggestions would be appreciated. Thanks
My fiddle is : https://jsfiddle.net/DharkRoses/wydyagao/
I used this code so far:
$scope.myVar = true;
$scope.toggleShow = function(key){
alert(key);
$scope.myVar =!$scope.myVar;
};

Answer 1

You should add myVar for each user in the ng-repeat list.
<tr ng-repeat="user in users">
<td><p ng-show ="user.myVar">CHECK</p>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.stat}}</td>
<td><button id ="btn" ng-click = "toggleShow(user)">show check</button> </td>
</tr>
Then in your controller
$scope.toggleShow = function(user){
alert(user.myVar);
user.myVar =!user.myVar;
};