title: AngularJS: Creating objects from inputs
body: <p>Here's my scenario</p>
  
  <p>I am dynamically creating duplicate forms each with same name values.. and another separate form containing other information.</p>
  
  <pre><code>&lt;form class="panels" id="form1"&gt;
     &lt;input name="invoice_no" class="input-container"&gt;
     &lt;input name="description" class="input-container"&gt;
     &lt;input name="amount" class="input-container"&gt;
  &lt;/form&gt;
  
  &lt;form class="panels" id="form2"&gt;
     &lt;input name="invoice_no" class="input-container"&gt;
     &lt;input name="description" class="input-container"&gt;
     &lt;input name="amount" class="input-container"&gt;
  &lt;/form&gt;
  
  &lt;form class="panels" id="form3"&gt;
     &lt;input name="invoice_no" class="input-container"&gt;
     &lt;input name="description" class="input-container"&gt;
     &lt;input name="amount" class="input-container"&gt;
  &lt;/form&gt;
  
  &lt;form id="summary"&gt;
  &lt;input name="totalCost"&gt;
  &lt;input name="date"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>What I want to do is to store these values in an array of objects like this:</p>
  
  <pre><code>[ 
    {"invoice_no":123456, "description":"some description","amount":2456},
    {"invoice_no":124578, "description":"abcd deasda ask","amount":1258},
    {"invoice_no":124585, "description":"another description","amount":3698}
  ]
  </code></pre>
  
  <p>I want to bind my javascript function to the ng-change event of each inputboxes to store the values.</p>
  
  <p>but instead, I get an array objects that contain what I type on the first textbox. like this one:</p>
  
  <p><a href="https://i.stack.imgur.com/9V1jV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9V1jV.png" alt="enter image description here"></a></p>
  
  <p>the array depends on how many forms were created, so if I have 4 forms I need to have 4 json objects inside my array. </p>
  
  <p>below is my javascript code so far</p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>$scope.saveData = function(){
      var element = event.target; 
      var object = angular.element(element).closest('.panels').attr('id');
      var value = angular.element(element).closest('.panels').find('.input-container').val();
      var key = angular.element(element).closest('.panels').find('.input-container').attr('name');
  
      object =  {};
      object [key] = value;       
  
      arrayOFProducts.push(object);
      console.log(arrayOFProducts);
  
  }
  </code></pre>