title: AngularJS Dynamic sum of list
body: <p>I am using angularJS ontop of my application.</p>
  
  <p>I have a basic example of a controller:</p>
  
  <pre><code>function OrderListCtrl($scope, $http) {
    $http.get('/static/angular/app/phones/van1.json').success(function(data) {
      $scope.van1 = data;
    });
  
    $http.get('/static/angular/app/phones/van2.json').success(function(data) {
      $scope.van2 = data;
    });
  </code></pre>
  
  <p>}</p>
  
  <p>And a sample JSON entry</p>
  
  <pre><code>{
          "id": "3", 
          "custName": "Mrs Smith",
          "accountNumber": "416", 
          "orderNumber": "12348", 
          "orderWeight": "120.20"
  }, 
  </code></pre>
  
  <p>My html looks like this:</p>
  
  <pre><code>&lt;div id=1&gt;
  &lt;h1&gt;Van 1 - Total Weight = XXX &lt;/h1&gt;
  &lt;ul class="sortdrag"&gt;
      &lt;li ng-repeat="van1 in van1" id="[[ van1.id ]]"&gt;
        [[van1.custName]] [[van1.accountNumber]] [[van1.orderWeight]]
  
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, I want to get the total weight for every li item in the ul.</p>
  
  <p>This WOULD be easy if the lists where static, however the lists are using jQuery-ui and I have multiple lists where the li items are dragged and dropped between each list. My question is, how can I have the XXX dynamically update to the value of all weights in each li in the ul, or more to the question can this even be done?</p>
  
  <p>I dont really want to use an onDrop event as this will not work on the pre-populated lists, so ideally I would like to use code that takes its values from all van1.orderWeight values in the ul.</p>
  
  <p>Any suggestions on the best way to approach this would be very much appreciated! And before anyone asks im using [[ and ]] as opposed to {{ and }} because I am using jinja2 templates.</p>
  
  <p>UPDATE:</p>
  
  <p>Ok to after reading the answer below  have amended the original controller to:</p>
  
  <pre><code>function OrderListCtrl($scope, $http) {
    $http.get('/static/angular/app/phones/van1.json').success(function(data) {
      $scope.van1 = data;
      // This part is easy, calcuate the sum of all weights from the JSON data
      $scope.sumV1 = _.reduce(_.pluck($scope.van1, 'orderWeight'), function (m, w) {return m + w}, 0);
    });
  
    $scope.getVan1Weight = function(){
      // here I try and write a function to calculate the dynamic weight
      // of a van, which will update when items get dropped in/out of the ul
       _.reduce(_.pluck($scope.van1, 'orderWeight'), function (m, w) {return m + w}, 0);
      }
  </code></pre>
  
  <p>And my template</p>
  
  <pre><code>&lt;div id="app" ng-controller="OrderListCtrl"&gt;
  
  &lt;div id=1&gt;
  &lt;h1&gt;Van 1 - Total Weight = [[getVan1Weight()]]  
  Starting Weight - [[sumV1]]&lt;/h1&gt;
  &lt;ul class="sortdrag"&gt;
      &lt;li ng-repeat="van1 in van1" id="[[ van1.id ]]"&gt;
        [[van1.custName]] [[van1.accountNumber]] [[van1.orderWeight]]
  
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now im using the underscorejs libary to help perform the calculations, but I can only seem to get this to work using the initial data, and not to update when new orders are dragged in from another ul</p>