How to target ng-show on specific items in ng-repeat? - angularjs

Question

http://plnkr.co/edit/aiGCPJEwTj0RWnuoCjsW?p=preview
I want the remove button to only show the popover for that item.
How would you go about this?
HTML:
<li ng-repeat="acc in accounts">
<div class="well well-sm">
<div class="popover-remove" ng-show="popoverRemove">Click to remove item</div>
<h4>{{acc.label}}</h4>
<button class="btn btn-default"
ng-mouseover="showPopover()"
ng-mouseleave="hidePopover()">Remove</button>
</div>
</li>
Angular Controller:
var app = angular.module('myApp', [])
.controller('AccountsCtrl',
['$scope',
function($scope) {
var vs = $scope;
vs.accounts = [
{
id: '1',
label: 'Bitage'
},
{
id: '2',
label: 'Blockchain.info'
},
{
id: '3',
label: 'Coinbase wallet'
},
{
id: '4',
label: 'Xapo wallet'
}
];
vs.showPopover = function() {
vs.popoverRemove = true;
};
vs.hidePopover = function() {
vs.popoverRemove = false;
};
}]);

Answer 1

Plunker for you
The thing is that ng-repeat creates it's own scope.So, 'popoverRemove' is the local variable for each scope.You can set true or false to local variable by sending context to controller of that particular element of ng-repeat and set it's value using 'this'.
<button class="btn btn-default"
ng-mouseover="showPopover(this)"
ng-mouseleave="hidePopover(this)">Remove</button>
vs.showPopover = function(context) {
context.popoverRemove = true;
};
vs.hidePopover = function(context) {
context.popoverRemove = false;
};

Answer 2

You can also create a property on each iteration like so:
Instead of calling a function on the scope I simply set the value of well.show to true/false, but you get the jist of the idea!
<li ng-repeat="acc in accounts track by $index">
<div class="well well-sm">
<div class="popover-remove" ng-show="well.show">Click to remove item</div>
<h4>{{acc.label}}</h4>
<button class="btn btn-default"
ng-mouseover="well.show=true"
ng-mouseleave="well.show=false">Remove</button>
</div>
</li>
Plunker updated

Answer 3

Move popOverRemove to each accounts. Then you can control it from each child scope. Update your showPopover/hidePopover as well.
vs.accounts = [
{
id: '1',
label: 'Bitage',
popoverRemove: false
},
{
id: '2',
label: 'Blockchain.info',
popoverRemove: false
},
{
id: '3',
label: 'Coinbase wallet',
popoverRemove: false
},
{
id: '4',
label: 'Xapo wallet',
popoverRemove: false
}
];
I have updated here
http://plnkr.co/edit/uAjhiYTDyXIBmkxAQzzw?p=preview