How to calculate the sum of repeated elements in AngularJS? - angularjs

Question

I am new to AngularJS and stuck on a problem from last one week.
I am getting dynamic weekly values for different groups.
My target is to caculate the sum of values for each group which is doable through filter, but I am not able to figure out how to re-calulate the weeklyvalues if I change the value of sum. What I have done so far:
Controller:
app.controller("CalculationController", [
"$scope", "calculationService", function ($scope, calculationService) {
getGroups();
function getGroups() {
calculationService.GetGroups().success(function(groups) {
$scope.groups= groups;
console.log(groups);
}).error(function (error) {
$scope.status = "Error Occured: " + error.message;
console.log($scope.status);
});
}$scope.getTotal = function () {
var groupTotal = [];
var total = 0; // hold the total for week
var totalPerGroup = 0;
var totalPerGroupArr = [[], []]; //array to store total values Per Group
var groups = $scope.groups; //getting the data of groups in a variable.
var totalCostForEachWeekPerMainGroup = [[], []]; //array to store total groups for each week
var totalGroupsCostPerGroup = []; //array to store the total cost per group
totalCostPerMainGroup = 0; //sum of all groups per Main Group
for (var i = 0; i < trps.length; i++) {
total = 0;
totalPerGroup = 0;
for (var j = 0; j < groups[i].WeeklyValues.length; j++) {
totalCostForEachWeekPerMainGroup[j][i] = groups[j].WeeklyValues[i].Cost;
totalPerGroupArr[i][j] = groups[i].WeeklyValues[j].Cost;
totalPerGroup += totalPerGroupArr[i][j];
total += totalCostForEachWeekPerMainGroup[j][i];
totalCostPerMainGroup += totalCostForEachWeekPerMainGroup[j][i];
}
groupTotal.push(total);
totalGroupsCostPerGroup.push(totalPerGroup);
$scope.totalGroupsCostPerMainGroup = totalCostPerMainGroup;
}
//Percentage calculation for each week
return groupTotal;
}
}]).filter('sumCalculation', function () {
return function (data, key) {
if (typeof (data) === 'undefined' || typeof (key) === 'undefined') {
return 0;
}
var total = 0;
for (var i = 0; i < data.length; i++) {
total += parseFloat(data[i][key]);
}
//$scope.sum = total;
return total;
}});
View:
<table class="table table-hover">
<tr>
<th>#Html.Label("Main Group")</th>
<th>#Html.Label("Group")</th>
<th ng-repeat="w in numberOfWeeks" ng-cloak>W{{w}}-2016</th>
<th>#Html.Label("Total")</th>
</tr>
<tr ng-repeat="(k, v) in GroupTotalPerMainGroupPerWeek"> // coming from another service
<td>{{k}}</td>
<td></td>
<td></td>
<td ng-repeat="cost in getTotal()">
{{cost}}
</td>
<td>{{totalGroupsCostPerMainGroup}}</td>
</tr>
<tr ng-repeat="g in groups">
<td></td>
<td ng-cloak>{{g.GroupName}}</td>
<td ng-repeat="c in g.WeeklyValues">
<input value="{{c.Cost}}" class="form-control" type="number" ng-model="c.Cost" ng-cloak/>
</td>
<td>
<input value="{{g.WeeklyValues|sumCalculation:'Cost'}}" class="form-control" string-to-number ng-model="Cost" type="number" ng-cloak/>
</td>
</tr>
</table>
Service:
app.factory("CalculationService", ['$http', function ($http) {
var CalculationService= {};
CalculationService.GetGroups = function () {
return $http.get("/Angular/GetGroups");
}
return CalculationService;}]);
What I want to achieve:
Calculate the sum of each value per group
Calculate the sum of all groups per week
Calculate the total sum of all groups
If i change the value of sum it should change the each weekly value accordingly
If i change the value of total (i.e. 1265 in example) it should recalculate the sum (value) of each group and each weekly value should be re-calculated:
The example of view is like:
GroupName------Week1Value------Week2Value------Week3Value------Sum
------------------ 312 ------------- 328 --------- 625----------- 1265
G1-------------- 112 ------------- 113 --------- 300 ---------- 525
G2-------------- 200 ------------- 215 --------- 325 ---------- 740