title: Calculate total over repeated cart item totals with angular
body: <p>I've a simplified shopping cart like the following with a controller for each cart item:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html ng-app="cart"&gt;
    &lt;div ng-controller="cartCtrl"&gt;
      &lt;table&gt;
        &lt;tr&gt;&lt;th&gt;qty&lt;/th&gt;&lt;th&gt;prize&lt;/th&gt;&lt;th&gt;total&lt;/th&gt;&lt;/tr&gt;
        &lt;tr ng-repeat="item in cartItems" ng-controller="cartItemCtrl"&gt;
          &lt;td&gt;
            &lt;input ng-model="item.qty"/&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input ng-model="item.prize" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
            {{total}}
          &lt;/td&gt;
        &lt;/tr&gt;
       &lt;/table&gt;
       total: {{cartTotal}}
     &lt;/div&gt;
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"&gt;&lt;/script&gt;
    &lt;script&gt;
  (function(){
  
  var cart = angular.module('cart', []);
  
  cart.controller('cartCtrl', ['$scope', function($scope){
    $scope.cartItems = [{},{},{},{}];
  }]);
  
  cart.controller('cartItemCtrl', ['$scope', function($scope){
  
    $scope.$watchCollection('item', function(){
      $scope.total = $scope.item.qty * $scope.item.prize;
    });
  }]);
  
  }());
    &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I couldn't make it work in JSFiddle: <a href="http://jsfiddle.net/XY3n8/1/" rel="nofollow">http://jsfiddle.net/XY3n8/1/</a></p>
  
  <p>Now I want to to calculate the cart total but I do not want to recalculate the item totals. Instead I want to reuse the already calculated item totals. How? (In my use case the item total calculation is a bit more complex.)</p>