title: How do I access dynamically created fields in angularjs?
body: <p>When the text entered by the user in a text field passes the validation, I want to generate a new textbox. Now when the text of the new textbox is valid, another textbox should be generated. </p>
  
  <p>The problem is I am not able to do it, because the names of the that get created are of the type 'email1' 'email2' 'email3'. And I'm not able to access these dynamically generated fields.</p>
  
  <p>JS Snippet:</p>
  
  <pre><code>var master = {
      name: 'John Smith',
      address: {
          line1: '123 Main St.',
          city: 'Anytown',
          state: 'AA',
          zip: '12345'
      },
      contacts: [{
          type: 'phone',
          value: 'This is a value',
          validationtype: 'number'
      }]
  };
  
  $scope.addContact = function(contact) {
      var valueOfContact = $scope.form.contacts.value;
      console.log(valueOfContact);
      if ($scope.myForm.email.$valid == true) {
          tbCounter++;
          $scope.form.contacts.push({
              type: 'email',
              value: '',
              name: 'email' + tbCounter,
              id: 'email' + tbCounter
          });
          console.log($scope.form.contacts.indexOf(contact), $scope.form.contacts.length);
      }
  };
  </code></pre>
  
  <p>In the If clause I want to be able to access email1, email2 and so on.</p>
  
  <p>HTML Snippet:</p>
  
  <pre><code>&lt;div ng-repeat="contact in form.contacts"&gt;
    &lt;label&gt;{{ contact.type }}&lt;/label&gt;
    &lt;input name ="{{ contact.name }}" type="{{ contact.type }}" ng-model="contact.value" ng-change=addContact(contact) required/&gt;
    &lt;span class="error" ng-show="myForm.email.$error.required"&gt;required&lt;/span&gt;
    &lt;span class="error" ng-show="myForm.email.$error.email"&gt;invalid email&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks.</p>