title: MEAN Stack: Count and show the Sum of Values via AngularJS
body: <p>Hi I'm a beginner with the MEAN Stack and currently stuck with a logical challenge.</p>
  
  <p>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. </p>
  
  <p>Thanks for your help in advance!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="jumbotron text-center"&gt;
      &lt;h1&gt;Volume &lt;span class="label label-info"&gt;{{getTotal()}}    &lt;/span&gt;&lt;/h1&gt;
          &lt;/div&gt;
  
  &lt;div class="text-center" &gt;
              &lt;table class="table" &gt;
                  &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Drink&lt;/th&gt;
                      &lt;th&gt;Volume&lt;/th&gt;
                      &lt;th&gt;Date&lt;/th&gt;
                      &lt;th&gt;Comment&lt;/th&gt;
                      &lt;th&gt;Action&lt;/th&gt;
  
                  &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody ng-repeat="drink in drinks"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;{{drink.text}}&lt;/td&gt;
                      &lt;td&gt;{{drink.volume}} Liter&lt;/td&gt;
                      &lt;td&gt;{{drink.time}}&lt;/td&gt;
                      &lt;td&gt;{{drink.comment}}&lt;/td&gt;
                      &lt;td&gt;&lt;button type="submit" class="btn btn-primary btn-sm" 
                        ng-click="deleteDrink(drink._id)"&gt;delete&lt;/button&gt;&lt;/td&gt;
  
                  &lt;/tr&gt;
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
          &lt;/div&gt;'
  </code></pre>
  
  <p>Model:</p>
  
  <pre><code> 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);'
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>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 &lt;$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
                  });
          };
      }]);
  </code></pre>
  
  <p>So I have  at /api/drinks </p>
  
  <pre><code>    [{"_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"}
  ]
  </code></pre>
  
  <p>In my HTML I need a Display of the Value of all Volume Entries, so it would be 3.</p>