javascript - Can not hide the button of table row using Angular.js -

i getting 1 issue while trying hide button after button click using angular.js.i explaining code below.

<tbody id="detailsstockid">     <tr ng-repeat="code in listofgeneratedcode">         <td>{{$index+1}}</td>         <td>{{code.name}}</td>         <td>{{code.no_of_voucher}}</td>         <td>{{code.expired_date}}</td>         <td>{{code.voucher_amount}}</td>         <td>             <input type='button' class='btn btn-xs btn-green' value='view' ng-click="viewvouchercodedata(code.voucher_code_id);">         </td>         <td><img ng-src="upload/{{code.image}}" name="pro" border="0" style="width:50px; height:50px; border:#808080 1px solid;" /></td>         <td>             <input type='button' class='btn btn-xs btn-green' value='send' ng-click="sendvouchercode(code.voucher_code_id);">         </td>         <td ng-hide="editbutton">             <a ui-sref="code">                 <input type='button' class='btn btn-xs btn-green' value='edit' ng-click="editvouchercodedata(code.voucher_code_id);">             </a>         </td>         <td ng-hide="delbutton">             <a ui-sref="code">                 <input type='button' class='btn btn-xs btn-red' value='remove' ng-click="deletevouchercodedata(code.voucher_code_id);">             </a>         </td>     </tr> </tbody> 

my controller side code given below.

$scope.sendvouchercode=function(vouchercodeid){         $scope.editbutton=true;         $scope.delbutton=true; } 

here problem when user clicking on send row's edit , delete button has disappearing.i need when user click on send button respective row's edit , delete button should disappear.please me.

the existing code needs modification key edit , delete same, clears whole. please refer code below:

html

<tbody id="detailsstockid">     <tr ng-repeat="code in listofgeneratedcode">         <td>{{$index+1}}</td>         <td>{{code.name}}</td>         <td>{{code.no_of_voucher}}</td>         <td>{{code.expired_date}}</td>         <td>{{code.voucher_amount}}</td>         <td><input type='button' class='btn btn-xs btn-green' value='view' ng-click="viewvouchercodedata(code.voucher_code_id);"></td>         <td><img ng-src="upload/{{code.image}}" name="pro" border="0" style="width:50px; height:50px; border:#808080 1px solid;" /></td>         <td>             <input type='button' class='btn btn-xs btn-green' value='send' ng-click="sendvouchercode(code.voucher_code_id);">         </td>         <td ng-hide="code.editbutton">             <a ui-sref="code">                 <input type='button' class='btn btn-xs btn-green' value='edit' ng-click="editvouchercodedata(code.voucher_code_id);">             </a>         </td>         <td ng-hide="code.delbutton">             <a ui-sref="code">                 <input type='button' class='btn btn-xs btn-red' value='remove' ng-click="deletevouchercodedata(code.voucher_code_id);">             </a>         </td>     </tr> </tbody> 

js

add after $scope.listofgeneratedcode has been instantiated.

angular.foreach($scope.listofgeneratedcode, function (value, key) {     value.push('editbutton', false);     value.push('delbutton', false); }); 

append/change existing methods with:

$scope.sendvouchercode = function (id) {     angular.foreach($scope.listofgeneratedcode, function (value, key) {         if (value.voucher_code_id == id) {             value.editbutton = $scope.delbutton = true;         }     }); }  $scope.editvouchercodedata = function (id) {     angular.foreach($scope.listofgeneratedcode, function (value, key) {         if (value.voucher_code_id == id) {             value.editbutton = true;         }     }); }  $scope.deletevouchercodedata = function (id) {     angular.foreach($scope.listofgeneratedcode, function (value, key) {         if (value.voucher_code_id == id) {             value.delbutton = true;         }     }); }