title: Angular 2 dynamic create select and set selected option (edit operation)
body: <p>im trying to edit user. That user have non primitive array of machines. On edit i want to create new elements with select option and set that select option to value from user object:</p>
  
  <pre><code>export class User{
      constructor(
          private id: number,
          private name: string,
          private machines: Machine[]
      ){}
  }
  
  export class Machine{
      constructor(
          private id: number,
          private name: string,
          private price: string
      ){}
  }
  </code></pre>
  
  <p>got json:</p>
  
  <pre><code>users =[  
          {  
              "id":1,
              "name":"Mike",
              "machines":[  
                  {  
                      "id":1,
                      "name":"bike",
                      "price":"10"
                  },
                  {  
                      "id":2,
                      "name":"boat",
                      "price":"100"
                  }
              ]
          }
      ]
  machines =[  
          {  
              "id":1,
              "name":"bike",
              "price":"10"
          },
          {  
              "id":2,
              "name":"boat",
              "price":"100"
          },
          {  
              "id":3,
              "name":"car",
              "price":"50"
          }
      ]
  </code></pre>
  
  <p>On edit i want to set select value to the corresponding object of machine from user.</p>
  
  <pre><code>&lt;div *ngFor="let machine of user.machines;  let i = index"&gt;
      &lt;label&gt;Pick machine&lt;/label&gt;
      &lt;div&gt;
          &lt;select name="machine" [(ngModel)]="user.machines[i]"&gt;
              &lt;option *ngFor='let mach of machines' [ngValue]='mach' &gt;{{mach.name}}&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Problem is in this:</p>
  
  <p><a href="https://i.stack.imgur.com/DnJX9.png" rel="nofollow"><img src="https://i.stack.imgur.com/DnJX9.png" alt="enter image description here"></a></p>
  
  <p>The both select options are setted to the last one.</p>
  
  <p><strong>UPDATE (Solution):</strong></p>
  
  <p>Forgot to mention, that div is inside <a href="https://angular.io/docs/ts/latest/guide/forms.html" rel="nofollow">Template-Driven form</a>.</p>
  
  <pre><code>&lt;form #f="ngForm" *ngIf="user" (submit)="updateUser(f.valid)" novalidate&gt;
      &lt;div *ngFor="let machine of user.machines;  let i = index"&gt;
          &lt;label&gt;Pick machine&lt;/label&gt;
          &lt;div&gt;
              &lt;select name="machine" [(ngModel)]="user.machines[i]"&gt;
                  &lt;option *ngFor='let mach of machines' [ngValue]='mach' &gt;{{mach.name}}&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>If in form the name of element is actually submitted.</p>
  
  <blockquote>
    <p>Each input element has a name property that is required by Angular
    Forms to register the control with the form.</p>
  </blockquote>
  
  <p>By adding unique name i solved my problem:</p>
  
  <pre><code>&lt;select name="machine_{{i}}" [(ngModel)]="user.machines[i]"&gt;
                  &lt;option *ngFor='let mach of machines' [ngValue]='mach' &gt;{{mach.name}}&lt;/option&gt;
  </code></pre>