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

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;
};