Sum of Inputs in ng-repeat

Question

I'm trying to create a prototype that populates a list of unpaid invoices using ng-repeat. Within this, I am creating an input for each invoice. I want to be able to have a user input $ amounts into these inputs and then display a total of all inputs. Going off of this example: http://jsfiddle.net/d5ug98ke/9/ I cannot get it to work as it does in the fiddle. Here is my code:

<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 to 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()" min="0" 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 to pay:</h5></td>
            <td class="inv-res5">${{total}}</td>
            <td class="inv-res6"></td>
          </tr>
        </tbody>
      </table>

And the Angular:

myBirkman.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.invoices.forEach(function(item){
                $scope.tot += parseInt(item.payment);
            });
        };
    }]);

Any help would be appreciated. I dont necessarily need to use the method in the fiddle if someone has a better idea.

Answer 1

It seems there are two issues. First a simple typo:

$scope.tot += parseInt(item.payment, 10);

should be

$scope.total += parseInt(item.payment, 10);

And you should also reset $scope.total to 0 at the beginning of getTotal().

Edit: The way you did it, you always have to remember to update the total when something changes. Instead, you could let getTotal just return the total and write {{ getTotal() }} in the template. You don't have to trigger getTotal() in via ng-change then. If you don't have a lot of inputs you shouldn't worry about performance here.