title: Angular 2: Programmatically selecting option in combobox in all the rows in table
body: <p>I am building an application using Angular 2 with TypeScript. I have the following table that contains select control in one of its column. Select control contents are binded to another string array - </p>
  
  <pre><code>    &lt;table ngControl="lstClasses" name="lstClasses"&gt;
          &lt;tr *ngFor="let class of model.Classes"&gt;
              &lt;td&gt;{{class.Name}}&lt;/td&gt;
              &lt;td&gt;
                  &lt;select name="cmbSection" [(ngModel)]="class.Section"&gt;
                      &lt;option *ngFor="let section of sections"
                          [ngValue]="section"&gt;
                          {{section}}
                      &lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>Where Class is an object of type {Name: string, Section: string}
  sections is a string[] = ["White", "Blue", "Purple", "Green", "Red"].</p>
  
  <p>When I change the selected option in any of the combobox of any row, it get reflected correctly in model. When I save and refresh the data, all the select control in all rows shows the selected option that was saved with the last row in the table. </p>
  
  <p>E.g if I select "Purple" in last row of the table and save it, when the data refreshes all the rows show "Purple" as selected option, even though Model contains correct options.</p>
  
  <p>Can you please help where I going wrong in this. </p>