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

http://plnkr.co/edit/aigcpjewtj0rwnuocjsw?p=preview

i want remove button show popover that item.

how go this? html:

<li ng-repeat="acc in accounts">     <div class="well well-sm">         <div class="popover-remove" ng-show="popoverremove">click 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;         };      }]); 

plunker you

the thing ng-repeat creates it's own scope.so, 'popoverremove' local variable each scope.you can set true or false local variable sending context controller of particular element of ng-repeat , 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; };