title: How to bind an array of objects and its properties to multiple html inputs with AngularJS?
body: <p>I'm using <strong>AngularJS</strong> for binding forms to a Java Script object, the way simple text inputs or checkboxes are associated on the go.</p>
  
  <p>The problem is when I want to have in my <em>main object</em> an array of objects with multiple properties and these objects are dynamically added, or in other words, more objects can be added and so <code>html</code> elements to input their properties.</p>
  
  <p><strong>I'm coding for <a href="http://registropsicologos.maricelaaguilarflores.com:2311/" rel="nofollow noreferrer">this site</a>:</strong></p>
  
  <p>These is where objects would be added to an array:</p>
  
  <p><img src="https://i.stack.imgur.com/giHiD.png" alt="enter image description here"></p>
  
  <p>That whole row is equivalent to an object <em><code>Posgrado</code></em> and so <em><code>Especialidad</code></em>, <em><code>Título</code></em> and <em><code>Cédula</code></em> are its properties. </p>
  
  <p>Clicking on <em><code>Añadir</code></em> button adds an input row (one more object). It can be seen here:</p>
  
  <p><img src="https://i.stack.imgur.com/Bi1cx.png" alt="enter image description here"></p>
  
  <p>Each of these wil be at <code>professional.data.postgraduates</code>, an array of objects.</p>
  
  <p><strong>How can I, using Angular:</strong></p>
  
  <blockquote>
    <ul>
    <li>Manage the adding of more input <em>rows</em>.</li>
    <li>Bind each input row to one single object and push it to an array.</li>
    <li>Finally, bind the array to <code>professional.data.postgraduates</code>.</li>
    </ul>
  </blockquote>
  
  <p>So far the only clue I have is using an extra <strong><code>Controller</code></strong> for such objects and maybe using some <strong><code>ng-init</code></strong> directives.</p>
  
  <p>Here I got my whole <strong>module</strong> and markup:</p>
  
  <pre><code>(function() {
  
  
          var app = angular.module('PsicologosRegister', ['checklist-model'])
  
          app.controller('PsicologoController', function() {
  
              this.psycho = psicologo
  
              this.print = function() {
  
                  console.log(this.psycho)
              }
          })
  
          app.controller('PersonalDataController', function() {
  
              this.data = datos_Personales
  
          })
  
          app.controller('ProfessionalDataController', function() {
  
              this.data = datos_Profesionales
          })
  
          app.controller('ProfessionalInterestsController', function() {
  
              this.data = intereses_Profesionales
          })              
  
  
  
          var datos_Personales = {}
          var datos_Profesionales = {}
          var intereses_Profesionales = {}
  
          var psicologo = {
  
                              datosPersonales:            datos_Personales,
                              datosProfesionales:         datos_Profesionales,
                              interesesProfesionales:     intereses_Profesionales
          }
  })()
  
  &lt;div class="container" id="seccionRegistro1" ng-controller="PersonalDataController as personal"&gt;
  &lt;form class="form-horizontal" role="form"&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label for="inputNombre" class="col-xs-2 control-label"&gt;Nombre(s)&lt;/label&gt;
      &lt;div class="col-xs-10"&gt;
        &lt;input type="text" class="form-control" id="inputNombre" placeholder="Nombre(s)" ng-model="personal.data.name" &gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label for="inputApellidos" class="col-xs-2 control-label"&gt;Apellidos&lt;/label&gt;
      &lt;div class="col-xs-10"&gt;
        &lt;input type="text" class="form-control" id="inputApellidos" placeholder="Apellidos" ng-model="personal.data.lastname"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label for="inputEdad" class="col-xs-2 control-label"&gt;Edad&lt;/label&gt;
      &lt;div class="col-xs-10"&gt;
        &lt;input type="text" class="form-control" id="inputEdad" placeholder="Edad" ng-model="personal.data.age"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
      &lt;label for="inputTel" class="col-xs-2 control-label"&gt;Teléfono&lt;/label&gt;
      &lt;div class="col-xs-10"&gt;
        &lt;input type="text" class="form-control" id="inputTel" placeholder="Teléfono" ng-model="personal.data.phone"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label for="inputCel" class="col-xs-2 control-label"&gt;Celular&lt;/label&gt;
      &lt;div class="col-xs-10"&gt;
        &lt;input type="text" class="form-control" id="inputCel" placeholder="Celular" ng-model="personal.data.mobile"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label for="inputMail" class="col-xs-2 control-label"&gt;e-mail&lt;/label&gt;
      &lt;div class="col-xs-10"&gt;
        &lt;input type="email" class="form-control" id="inputMail" placeholder="e-mail" ng-model="personal.data.email"&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  
  &lt;div class="form-group"&gt;
      &lt;label for="inputFB" class="col-xs-2 control-label"&gt;Facebook&lt;/label&gt;
      &lt;div class="col-xs-10"&gt;
        &lt;input type="text" class="form-control" id="inputFB" placeholder="Facebook" ng-model="personal.data.fb"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label for="inputDireccion" class="col-xs-2 control-label"&gt;Dirección&lt;/label&gt;
      &lt;div class="col-xs-10"&gt;
        &lt;input type="text" class="form-control" id="inputDireccion" placeholder="Dirección" ng-model="personal.data.address"&gt;
      &lt;/div&gt;
  &lt;/div&gt;      
  </code></pre>
  
  <p>        </p>
  
  <p><strong>Here is the markup refered in the questions above:</strong></p>
  
  <pre><code>&lt;div class="container" id="seccionRegistro2" ng-controller="ProfessionalDataController as professional"&gt;
      &lt;form class="form-horizontal" role="form"&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label for="inputAlmaMater" class="col-xs-2 control-label"&gt;Egresado de&lt;/label&gt;
              &lt;div class="col-xs-10"&gt;
                &lt;input type="text" class="form-control" id="inputAlmaMater" placeholder="Egresado de" ng-model="professional.data.almaMater"&gt;
              &lt;/div&gt;
          &lt;/div&gt;              
  
          &lt;div class="form-group"&gt;
              &lt;label for="inputAñoEgreso" class="col-xs-2 control-label"&gt;Año de egreso&lt;/label&gt;
              &lt;div class="col-xs-10"&gt;
                &lt;input type="text" class="form-control" id="inputAñoEgreso" placeholder="Año de egreso" ng-model="professional.data.course"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label for="inputCedula" class="col-xs-2 control-label"&gt;Cédula Profesional&lt;/label&gt;
              &lt;div class="col-xs-10"&gt;
                &lt;input type="text" class="form-control" id="inputCedula" placeholder="Cédula Profesional" ng-model="professional.data.cedula"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
  
              &lt;label for="checkPosgrado" class="col-xs-2 control-label"&gt;Estudios de Posgrado&lt;/label&gt;
  
              &lt;div class="Posgrados" ng-init="numPosgrados = 1" ng-repeat="i in numPosgrados"&gt;
  
                  &lt;div class="col-xs-2"&gt;
                      &lt;select class="form-control inputPosgradoTipo"&gt;
                          &lt;option&gt;Especialidad&lt;/option&gt;
                          &lt;option&gt;Maestría&lt;/option&gt;
                          &lt;option&gt;Doctorado&lt;/option&gt;
                      &lt;/select&gt;               
                  &lt;/div&gt;
  
                  &lt;div class="col-xs-4"&gt;
                      &lt;input type="text" class="form-control inputPosgradoTitulo" placeholder="Título"&gt;                       
                  &lt;/div&gt;
  
                  &lt;div class="col-xs-3"&gt;
                      &lt;input type="text" class="form-control inputPosgradoCedula" placeholder="Cédula"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-xs-1"&gt;
                      &lt;input type="button" class="form-control btnAñadirPosgrado" value="Añadir"&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
  
          &lt;/div&gt;  
  </code></pre>