angular add data outside ng-repeat - django

Question

I have an angular app that has the following ng-repeat:
<div ng-repeat="detail in mpttdetails">
<div ng-if="detail.category.id == {{node.id}}" class="list-group">
{%verbatim%}
<li class="list-group-item" >
<div class="row">
<div class=".col-lg-2 col-md-2 col-sm-2">
{{detail.student_academic_credit.course_name}}
</div>
<div class=".col-lg-4 col-md-4 col-sm-3">
{{detail.student_academic_credit.title}}
</div>
<div class=".col-lg-2 col-md-2 col-sm-2">
{{detail.student_academic_credit.credit}}
</div>
<div class=".col-lg-2 col-md-2 col-sm-2">
{{detail.student_academic_credit.final_grade}}
</div>
<div class=".col-lg-2 col-md-2 col-sm-3">
{{detail.student_academic_credit.term}}
</div>
</div>
</li>
{%endverbatim%}
</div>
</div>
My mpttservice here is a service that fetches data from a django app. Here i would like to have a bootstrap badge as:
<span class="badge badge-info">{{sum}}</span>
just above the ng-repeat such that it adds all the {{detail.student_academic_credit.credit}} from the list. How do i achieve this since all the details are inside the ng-repeat??

Answer 1

I suggest you use a couple of filters: Angular's filter for filtering details based on their categoryId and one custom filter for summing credits.
app.filter('sumCredits', function () {
return function (details) {
var sum = 0;
details.forEach(function (item) {
sum += item.student_academic_credit.credit;
});
return sum;
};
});
<span class="badge badge-info"
ng-bind="mpttdetails | filter:{catagory:{id:node.id}} | sumCredits">
</span>
<div ng-repeat="detail in mpttdetails | filter:{catagory:{id:node.id}}">
{%verbatim%}
<li class="list-group-item">
...
See, also, this short demo.

Answer 2

In the controller that has the service injected, loop through just like ng-repeat is doing and add to your $scope.sum.
app.controller('WhateverCtrl', function($scope, mptt) {
// Assuming it's an ajax call
mptt.getDetails().success(function(mpttdetails) {
$scope.mpttdetails = mpttdetails;
// Set sum on scope
var sum = 0;
angular.forEach(mpttdetails, function(detail) {
sum = sum + detail.student_academic_credit.credit;
});
$scope.sum = sum;
});
});