title: Angular 2 not showing correctly values in input
body: <p>I've this component template</p>
  
  <pre><code>&lt;!-- Some initial page code --&gt;
  &lt;sm-modal title="Create new movement" icon="exchange" #editStorageModal&gt;
    &lt;modal-content&gt;
      &lt;form class="ui form error" (ngSubmit)="saveEdit()" #editStorageModalForm="ngForm"&gt;
        &lt;!-- Other stuff --&gt;
        &lt;table class="ui celled table"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Product&lt;/th&gt;
              &lt;th&gt;Amount changed (negative for removals)&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr *ngFor="let movement of currentStorageMovement.storage_product_movements; let i = index; trackBy:customTrackBy"&gt;
              &lt;td&gt;
                &lt;sm-select [(model)]="movement.product_id" placeholder="Select product..." class="fluid search" [ngClass]="{loading: loadingProducts}"&gt;
                  &lt;option *ngFor="let product of products" value="{{product.id}}"&gt;{{product.name}} - {{product.supplier?.name}}&lt;/option&gt;
                &lt;/sm-select&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;div class="field" [ngClass]="{error: formErrors.storage_product_movements &amp;&amp; formErrors.storage_product_movements[i]?.amount}"&gt;
                  &lt;input type="number" step="1" placeholder="Amount" [(ngModel)]="movement.amount" name="amount"&gt;
                &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;a class="clickable" (click)="deleteProductMovement(i)"&gt;&lt;i class="trash icon"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr *ngIf="(!storageMovements || !storageMovements.length) &amp;&amp; !loading"&gt;&lt;td colspan="3" class="center aligned"&gt;No storage movements yet...&lt;/td&gt;&lt;/tr&gt;
            &lt;tr *ngIf="loading"&gt;&lt;td colspan="3"&gt;&lt;div class="ui active centered inline loader"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;div class="ui button primary" (click)="addNewProductMovement()"&gt;New product movement&lt;/div&gt;
      &lt;/form&gt;
    &lt;/modal-content&gt;
    &lt;modal-actions&gt;
      &lt;div class="ui button red" (click)="closeEdit()"&gt;Abort&lt;/div&gt;
      &lt;div class="ui button green" (click)="editStorageModalForm.ngSubmit.emit()" [ngClass]="{loading: submitting}"&gt;Save&lt;/div&gt;
    &lt;/modal-actions&gt;
  &lt;/sm-modal&gt;
  </code></pre>
  
  <p>when I have 2 elements in <code>currentStorageMovement.storage_product_movements</code> one with amount <code>2</code> and the other with amount <code>3</code> angular displays 2 inputs with both having <code>3</code> as value.</p>
  
  <p>Using Augury I can se the array elements have correctly 2 and 3 as values, the input element with 3 (the one that should be 2) instead has these properties:</p>
  
  <pre><code>NgModel
    value:  3
    viewModel:  2
  </code></pre>
  
  <p>so somehow ngModel knows the value but displays something else in the input value</p>
  
  <p>For reference, the modal code is <a href="https://github.com/vladotesanovic/ngSemantic/blob/master/ng-semantic/modal/modal.ts" rel="nofollow">this</a></p>
  
  <p><strong>Update</strong>: after cloning the same template outside the modal, I can see that the input outside the modal is correct, the one inside is wrong, could be because the modal uses jquery to move the dom from my template to outside the app dom element to have correct styling/positioning?</p>