javascript - Populate an input when checkbox is checked from ngRepeat -

i'm trying populate input 2 ways. first method type amount input, works perfectly. second method (which i'm struggling with) check checkbox generated within ngrepeat directive.

the desired behavior checkbox take value of item.amount json data , populate input value. here markup:

<table class="table table-striped header-fixed" id="invoicetable">     <thead>       <tr>         <th class="first-cell">select</th>         <th class="inv-res2">invoice #</th>         <th class="inv-res3">bill date</th>         <th class="inv-res4">amount</th>         <th class="inv-res5">amount pay</th>         <th class="inv-res6"></th>       </tr>     </thead>     <tbody>       <tr ng-if="invoices.length" ng-repeat="item in invoices | filter: {status:'unpaid'}">         <td class="first-cell"><input type="checkbox" /></td>         <td class="inv-res2"><a href="invoices/{{item.invoicenum}}">{{item.invoicenum}}</a></td>         <td class="inv-res3">{{item.creationdate}}</td>         <td class="inv-res4" ng-init="invoices.total.amount = invoices.total.amount + item.amount">{{item.amount | currency}}</td>         <td class="inv-res5">$           <input ng-validate="number" type="number" class="input-mini" ng-model="item.payment" ng-change="gettotal()" step="0.01"  /></td>       </tr>     </tbody>   </table>   <table class="table">     <tbody>       <tr class="totals-row" >         <td colspan="3" class="totals-cell"><h4>account balance:&nbsp;<span class="status-error">{{invoices.total.amount | currency }}</span></h4></td>         <td class="inv-res4"><h5>total pay:</h5></td>         <td class="inv-res5">{{total | currency}}</td>         <td class="inv-res6"></td>       </tr>     </tbody>   </table> 

and here javascript:

    myapp.controller('invoicelist', ['$scope', '$http', function($scope, $http) {     $http.get('assets/js/lib/angular/invoices.json').success(function(data) {         $scope.invoices = data;     });      $scope.sum = function(list) {          var total=0;          angular.foreach(list , function(item){             total+= parseint(item.amount);          });          return total;     };        $scope.total = 0;     $scope.gettotal = function() {         $scope.total = 0;         $scope.invoices.foreach(function(item){             $scope.total += parsefloat(item.payment);         });     };      $scope.pushpayment = function(item){         if($scope.checked == 'checked'){           return item.payment;         }     };    }]); 

if understand correctly want toggle-able check box, if checked want copy invoices amount input box below. similar below combination of ng-model , ng-change

<tr ng-if="invoices.length" ng-repeat="item in invoices | filter: {status:'unpaid'}">     <td class="first-cell">         <input type="checkbox" ng-model="item.checked" ng-change="select(item)"/>     </td>     <td class="inv-res5">$       <input ng-validate="number" type="number" class="input-mini" ng-model="item.payment" step="0.01"/>     </td> </tr> 

and add following controller

$scope.select = function(item) {     if(item.checked){        item.payment = item.amount;     } } 

what should do:

• you bind status of check box $scope.checked using ng-model
• every time checkbox status changes ng-change called, therefore selectinvoice called.
• select invoice checks whether checkbox checked , adjusts item.payment value accordingly bound inputs ng-model

see plunker working example (note thinned out code bit we're interested in

---

as aside, don't need have input box call gettotal when value changes. change last few lines to:

<td class="inv-res4"><h5>total pay:</h5></td> <td class="inv-res5">{{gettotal() | currency}}</td> 

and modify javascript to:

$scope.gettotal = function() {     var total = 0;     $scope.invoices.foreach(function(item){         total += parsefloat(item.payment);     });     return total; }; 

it still date every time angular 'digests'