Nested ng repeat failure in angular js - angularjs

Question

Try to do a nest ng-repeat, parent ng-repeat works but not for its child
1.Created object and insert data when app init
2.display data by calling ng-repeat
angular.module('lipapp', []).controller('lipapp_Module_Control', function ($scope, $http, $window) {
$scope.CompaignBasket = [];
$scope.CompaignBasketTotal = 0;
$scope.CompaignBasketCauseTotal = [];
//Sample Data Section, Real data plz go to $scope.UpdateCompaign function
$scope.InitialCompaignBasket = function () {
$scope.CompaignBasket = [];
var causeAmount = [];
var causeitem = 0;
var donorDetail = {};
donorDetail.Date = '2/14/13';
donorDetail.Donor = 'George Smith';
donorDetail.City = 'Los Angelos';
donorDetail.State = 'CA';
donorDetail.Total = 400;
causeAmount = []; //forloop Dynamic Insert!
causeAmount.push(10);
causeAmount.push(0);
causeAmount.push(500);
causeAmount.push(0);
causeAmount.push(1000);
causeAmount.push(0);
//causeitem = 0;causeAmount.push(causeitem); or I should use this format?
donorDetail.DonorCauseAmount = causeAmount;
$scope.CompaignBasketTotal += donorDetail.Total;
$scope.CompaignBasket.push(donorDetail);
console.log( $scope.CompaignBasket);
...
}
All the result display correctly but the item.donorCauseAmount has throw errors
<tr ng-repeat="item in CompaignBasket">
<td>{{item.Date}}</td>
<td>{{item.Donor}}</td>
<td>{{item.City}}</td>
<td>{{item.State}}</td>
<td ng-repeat="cause_item in item.DonorCauseAmount">{{cause_item}} </td>
<td>${{item.Total|number :0}}</td>
</tr>
Also for when I try to calculate the total for different CauseItem in the same col in script there is also a repeater error
for(var i=0; i< $scope.CompaignBasket.length; i++)
{
if (i == 0)
{
$scope.CauseTotalAmount = $scope.CompaignBasket[i].DonorCauseAmount;
console.log($scope.CauseTotalAmount);
}
else {
for (var j = 0; j < $scope.CauseTotalAmount.length; j++) {
// $scope.CauseTotalAmount[j] += $scope.CompaignBasket[i].DonorCauseAmount[j];
console.log('total '+ $scope.CompaignBasket[i].DonorCauseAmount[j]); //Error show up by this!!!
}
}
console.log($scope.CauseTotalAmount);
}
How can I solve it?

Answer 1

You need to use a track by index when you have duplicate values within the array.
<td ng-repeat="cause_item in item.DonorCauseAmount track by $index">{{cause_item}} </td>