arrays - Angularjs get <td> index value in popup textbox -

in table can array of key value below mention code. it's working fine

get value

<tbody ng-repeat="value in itr">         <tr ng-repeat="(key, val) in value">             <td>{{val.pan_number}}</td>             <td>{{val.name}}</td>             <td>{{val.tax_payable}}</td>             <td>{{val.taxes_paid}}</td>             <td>{{val.year}}</td>             <td><button class="btn btn-primary" ng-click="open($index)">edit</button></td>         </tr>     </tbody> 

on edit want show value in popup textbox below mention code controller.js

$scope.open = function(){         var modalinstance = $uibmodal.open({             templateurl: 'path.html',              animation: true,             controller: function($scope, $modalinstance) {                 $scope.cancel = function() {                     $modalinstance.dismiss('cancel');                 };                 $scope.ok = function () {                   $modalinstance.close();                 };             }         });       } 

popup.html

<div class="modal-content">   <div class="modal-header">     <button type="button" class="close" data-dismiss="modal" ng-click="cancel()" aria-hidden="true">×</button>     <h4 class="modal-title">itr update</h4>   </div>   <div class="modal-body">     <input type="text" name="pan" ng-model="val.pan_number"/>     <input type="text" name="pan" ng-model="value.pan_number"/>   </div>   <div class="modal-footer">     <button type="button" class="btn btn-default" ng-click="cancel()">no</button>     <button type="button" class="btn btn-primary" ng-click="ok()">yes</button>   </div> </div> 

but can't able value mistake done here. how fix this?

you can pass val template , resolve in modal controller follows,

<td><button class="btn btn-primary" ng-click="open(val)">edit</button></td>

$scope.open = function(val){     var modalinstance = $uibmodal.open({         templateurl: 'popup.html',         animation: true,         resolve: {           value: function(){ return val; }         },         controller: function($scope, $modalinstance, value) {             //to retain original value, making copy             $scope.val = angular.copy(value);             $scope.cancel = function() {                 $modalinstance.dismiss('cancel');             };             $scope.ok = function () {               for(var k in $scope.val){                  value[k] = $scope.val[k];               }               $modalinstance.close();             };         }     });   };  <!--popup.html-->  <div class="modal-content">   <div class="modal-header">     <button type="button" class="close" data-dismiss="modal" ng-click="cancel()" aria-hidden="true">×</button>     <h4 class="modal-title">itr update</h4>   </div>   <div class="modal-body">     <input type="text" name="pan" ng-model="val.pan_number"/>     <input type="text" name="pan" ng-model="val.name"/>   </div>   <div class="modal-footer">     <button type="button" class="btn btn-default" ng-click="cancel()">no</button>     <button type="button" class="btn btn-primary" ng-click="ok()">yes</button>   </div> </div> 

1. we passing object reference (val) directly modal. ie) open(val)
2. using resolve can pass val dependency modal controller
3. since binding value ng-model - updates original value reference, if directly using without copy. so, making copy of passed value , binding ng-model.
4. when user clicks ok - update modified value original value reference.