AngularJS Calculating Total with ng-repeat

created by ozkary.com

by Sajeetharan Sinnathurai

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="app">
  <div ng-controller="app.invoice" class="container">
  <div ng-repeat="wspStaffTbl in staff_codes">
     {{wspStaffTbl.Staff_Type}}
     <input type="number" ng-model="wspStaffTbl.Permanent" ng-change="updateTotal(wspStaffTbl)">
     <input type="number" ng-model="wspStaffTbl.Contract" ng-change="updateTotal(wspStaffTbl)">
     <input type="number" ng-model="wspStaffTbl.Total"  ng-init="updateTotal(wspStaffTbl)">
</div>
  </div>
</div>

JavaScript

var app = angular.module('app', []);
app.controller('app.invoice', ['$scope', invoice]);

function invoice($scope) {
  $scope.staff_codes = [{
    name: 'Bush',
    Permanent: 2,
    Contract: 75,
    Total:0
  }, {
    name: 'Obama',
    Permanent: 5,
    Contract: 15,
      Total:0
  }, {
    name: 'Trump',
    Permanent: 3,
    Contract: 40,
      Total:0
  }]; 

$scope.updateTotal= function(val){
        val.Total =  val.Permanent + val.Contract;
    }
}