I cannot seem to obtain the total of the last column; instead, it shows the same total as the 3rd column.
Is there a way to specifically calculate the total for only the last column?
<body ng-app="Test">
<section style="margin-top:80px">
<h3>Plastic Calculator Form Version 2.0</h3>
<div ng-controller="TestController as test" >
<p>Currently, <strong><u># of individuals</u></strong> on Earth have pledged to lower their disposable plastic waste from <strong><u>{{ test.approve | sumByColumn: 'amount' }}</u></strong> Items annually to <strong><u>reduced amount</u></strong>. This promises a decrease of <strong><u>items reduced</u></strong> per year! Be part of the solution. Take the pledge!</p>
<table class="table">
<tr>
<th>Disposable Plastic Items</th>
<th>Enter Your Weekly Usage Number</th>
<th>Your Annual Usage Number is:</th>
<th>How Many Can You Reduce Annually?</th>
<th>Reduced amount</th>
</tr>
<tr ng-repeat="x in test.approve">
<td> {{ x.name }} </td>
<td> <input class="qty form-control" type="number" ng-model="x.number" ng-change="sumByColumn3()" min="0" restrict-to="[0-9]"/> </td>
<td ng-model="x.amount"> {{ x.number*x.amount }} </td>
<td> <input class="qty form-control" type="number" ng-model="x.reducedAmount" ng-change="sumByColumn2()" min="0" restrict-to="[0-9]"/> </td>
<td ng-model="x.reducedTotal"> {{ x.reducedAmount*x.reducedTotal }} </td>
</tr>
<tr>
<td>TOTALS</td>
<td>{{ test.approve | sumByColumn3: 'numeral' }}</td>
<td>{{ test.approve | sumByColumn: 'amount' }}</td>
<td>{{ test.approve | sumByColumn2: 'reducedAmount' }}</td>
<td>{{ test.approve | sumByColumn4: 'reducedTotal' }}</td>
</tr>
</table>
</div>
</section>
</body>
You can view the complete code here https://codepen.io/tampham/pen/RzqLQV