title: Angularjs ng-repeat creating multiple forms
body: <p>Using ng-repeat I am creating bunch of forms with values in it. With each form there is also button to add rows to that particular form with new fields. Code is below </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div ng-repeat="cont in contacts"&gt;
      &lt;form ng-submit="newContact()"&gt;
          &lt;input type="text" class="xdTextBox" ng-model="cont.ac"/&gt;
          &lt;input type="text" class="xdTextBox" ng-model="cont.cat"/&gt;
          &lt;input type="text" class="xdTextBox" ng-model="cont.loc"/&gt;
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
          &lt;a href ng-click="addFields()"&gt;Add&lt;/a&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>$scope.contacts = [{ ac: '', auth: '', autname: ''}];
  $scope.tasks = [];
  $scope.addFields = function () {
      $scope.contacts.push({ ac: '', auth: '', autname: '' });
      console.log($scope.contacts);
  }
  </code></pre>
  
  <p>It is creating all the forms and the rows are added however there are two problems.:</p>
  
  <ol>
  <li>When I add to new row of fields it actually adds the row to all the forms created by ng-repeat.</li>
  <li>When i type in the field or inserted fields it copys the text to all the sub forms.</li>
  </ol>
  
  <p>Please let me know how i can fix it so that when add button is pressed only row in that particular form is created and when i enter text in the fields of newly pushed fields it only binds it to that particular one not to all the ones created. Thanks</p>