title: How do I update this Angular cart from a separate product controller?
body: <p>I have the cart working but I can't seem to figure out how to add items to the cart correctly from a separate product controller. I've been playing with services and factories but I cant get my head around how to make them work.</p>
  
  <p><a href="http://jsfiddle.net/75m7e/823/" rel="nofollow">http://jsfiddle.net/75m7e/823/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;h2&gt;Shopping Card Example&lt;/h2&gt;
  &lt;div ng:controller="CartForm"&gt;
      &lt;table class="table"&gt;
          &lt;tr&gt;
  
              &lt;th&gt;Description&lt;/th&gt;
              &lt;th&gt;Qty&lt;/th&gt;
              &lt;th&gt;Cost&lt;/th&gt;
              &lt;th&gt;Total&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr ng:repeat="item in invoice.items"&gt;
              &lt;td&gt;&lt;input type="text" ng:model="item.description"class="input-small"&gt;&lt;/td&gt;           
              &lt;td&gt;&lt;input type="number" ng:model="item.qty" ng:required class="input-mini"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="number" ng:model="item.cost" ng:required class="input-mini"&gt;&lt;/td&gt;
              &lt;td&gt;{{item.qty * item.cost | currency}}&lt;/td&gt;
              &lt;td&gt;
                  [&lt;a href ng:click="removeItem($index)"&gt;X&lt;/a&gt;]
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;a href ng:click="addItem()" class="btn btn-small"&gt;add item&lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;Total:&lt;/td&gt;
              &lt;td&gt;{{total() | currency}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function CartForm($scope) {
  $scope.invoice = {
      items: [{
          qty: 10,
          description: 'item',
          cost: 9.95}]
  };
  
  $scope.addItem = function() {
      $scope.invoice.items.push({
          qty: 1,
          description: '',
          cost: 0
      });
  },
  
  $scope.removeItem = function(index) {
      $scope.invoice.items.splice(index, 1);
  },
  
  $scope.total = function() {
      var total = 0;
      angular.forEach($scope.invoice.items, function(item) {
          total += item.qty * item.cost;
      })
  
      return total;
  }
  }
  </code></pre>
  
  <p>I want to click the add to cart button within the product controller and expose the products data to the cart controller, adding the item to the list. What's the best way to do this?</p>