title: How to pass the values of a list as arguments of function in angularjs
body: <h2>HTML code</h2>
  
  <p>In the second controller when I am trying to show the values in "itemBought List" on click of button its rendering empty string for name and quantity while I have data for the same in itemToBuy.itemList".</p>
  
  <p>It seems the datas for name and quantity are not passed into the addItemToBoughtList() function. How to achieve that.</p>
  
  <pre><code>    &lt;!-- To Buy List --&gt;
  &lt;div class="col-md-6" ng-controller="ToBuyController as itemToBuy"&gt;
  &lt;h2&gt;To Buy:&lt;/h2&gt;
  &lt;ul&gt;
  
  &lt;li ng-repeat="item in itemToBuy.itemList"&gt; Buy {{item.itemQuantity}} of {{item.itemName}}
  &lt;button class="btn btn-default" ng-click="itemToBuy.addItemToBoughtList()"&gt;&lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt; Bought&lt;/button&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;div class="emptyMessage"&gt;Everything is bought!&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Already Bought List --&gt;
  &lt;div class="col-md-6" ng-controller="AlreadyBoughtController as itemBought"&gt;
  &lt;h2&gt;Already Bought:&lt;/h2&gt;
  &lt;ul&gt;
  &lt;li ng-repeat="item in itemBought.items"&gt;
  Bought {{ items.quantity }} of {{ item.name }}&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="emptyMessage"&gt;Nothing bought yet.&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>Javascript code</h2>
  
  <pre><code>    (function (){
  'use strict';
  
  angular.module('ShoppingListCheckOff', [])
  .controller('ToBuyController', ToBuyController)
  .controller('AlreadyBoughtController', AlreadyBoughtController)
  .service('ShoppingListCheckOffService',ShoppingListCheckOffService);    
  
  ToBuyController.$inject = ['ShoppingListCheckOffService'];
  function ToBuyController(ShoppingListCheckOffService) {
  var itemToBuy= this;
  
  itemToBuy.itemName = "";
  itemToBuy.itemQuantity = "";
  
  itemToBuy.itemList = [
  {itemName : 'cookies', itemQuantity : 10},
  {itemName : 'napkins', itemQuantity : 15}
  ];
  
  itemToBuy.addItemToBoughtList = function () {
  ShoppingListCheckOffService.addItemToBoughtList(itemToBuy.itemName, itemToBuy.itemQuantity);
  }
  }
  
  
  AlreadyBoughtController.$inject = ['ShoppingListCheckOffService'];
  function AlreadyBoughtController(ShoppingListCheckOffService) {
  var itemBought = this;
  itemBought.name="";
  itemBought.items = ShoppingListCheckOffService.getItems();
  }
  
  function ShoppingListCheckOffService() {
  var service = this;
  
  // List of shopping items
  var items = [];
  
  service.addItemToBoughtList = function (itemName, quantity) {
  var item = {
    name: itemName,
    quantity: quantity
  };
  items.push(item);
  };
  
  service.getItems = function () 
  return items; 
  };
  }
  
  })();
  </code></pre>