MEAN Stack: Count and show the Sum of Values via AngularJS - angularjs

Question

Hi I'm a beginner with the MEAN Stack and currently stuck with a logical challenge.
I know how to get the count of elements of my table with {{element.length}} in HTML but I need to get the total sum of a given value.
Thanks for your help in advance!
HTML:
<div class="jumbotron text-center">
<h1>Volume <span class="label label-info">{{getTotal()}} </span></h1>
</div>
<div class="text-center" >
<table class="table" >
<thead>
<tr>
<th>Drink</th>
<th>Volume</th>
<th>Date</th>
<th>Comment</th>
<th>Action</th>
</tr>
</thead>
<tbody ng-repeat="drink in drinks">
<tr>
<td>{{drink.text}}</td>
<td>{{drink.volume}} Liter</td>
<td>{{drink.time}}</td>
<td>{{drink.comment}}</td>
<td><button type="submit" class="btn btn-primary btn-sm"
ng-click="deleteDrink(drink._id)">delete</button></td>
</tr>
</tbody>
</table>
</div>'
Model:
var mongoose = require('mongoose');
var Schema =new mongoose.Schema({
text : {type : String, default: ''},
volume: {type: Number, default: null},
zeit: {type: Date, default:Date.now},
comment: {type: String}
});
module.exports = mongoose.model('mongoose', Schema);'
Controller:
angular.module('drinkController', [])
// inject the drink service factory into our controller
.controller('mainController', ['$scope','$http','Drinks', function($scope, $http, Drinks) {
$scope.formData = {};
$scope.loading = true;
// GET =====================================================================
// when landing on the page, get all drinks and show them
// use the service to get all the drinks
Drinks.get()
.success(function(data) {
$scope.drinks = data;
$scope.loading = false;
});
// CREATE ==================================================================
// when submitting the add form, send the text to the node API
$scope.createDrink = function() {
// validate the formData to make sure that something is there
// if form is empty, nothing will happen
if ($scope.formData.text != undefined) {
$scope.loading = true;
// call the create function from our service (returns a promise object)
Drinks.create($scope.formData)
// if successful creation, call our get function to get all the new drinks
.success(function(data) {
$scope.loading = false;
$scope.formData = {}; // clear the form so our user is ready to enter another
$scope.drinks = data; // assign our new list of drinks
});
}
}
//Problem Function!! I don't know how to read desired values
$scope.getTotal=function(){
var total=0;
for (var i=0; i <$scope.drinks; i++){
var sum= $scope.drinks.volume[i]; //??
total= sum ; //?
}
return total;
}
// DELETE ==================================================================
// delete a todo after checking it
$scope.deleteDrink = function(id) {
$scope.loading = true;
Drinks.delete(id)
// if successful creation, call our get function to get all the new todos
.success(function(data) {
$scope.loading = false;
$scope.drinks = data; // assign our new list of todos
});
};
}]);
So I have at /api/drinks
[{"_id":"555c23943e0bf3fc403864c3",
"comment":"Yummie",
"__v":0,
"time":"2015-05-20T06:03:17.340Z",
"**volume":2**,
"text":"Coke"},
{"_id":"555c239d3e0bf3fc403864c4",
"comment":"Mooh!",
"__v":0,
"time":"2015-05-20T06:03:17.340Z",
**"volume"**:1,
"text":"Milk"}
]
In my HTML I need a Display of the Value of all Volume Entries, so it would be 3.

Answer 1

This should work:
$scope.getTotal=function(){
var total=0;
for (var i=0; i <$scope.drinks.length; i++){
total += $scope.drinks[i].volume;
}
return total;
}