<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report
[ ] feature request
[ ] support request "><pre class="notranslate"><code class="notranslate">[x] bug report
[ ] feature request
[ ] support request 
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
When a <code class="notranslate">&lt;select&gt;</code> is bound with <code class="notranslate">[ngModel])</code> the binding is not refreshed when the options are reloaded as can happen when the options are loaded from the server asynchronously.</p>
<p dir="auto">In the repro provided below, given this HTML template,</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    State:
    &lt;select [(ngModel)]=&quot;address.state&quot;&gt;
      &lt;option *ngFor=&quot;let state of states&quot;&gt;{{state}}&lt;/option&gt;
    &lt;/select&gt;"><pre class="notranslate"><code class="notranslate">    State:
    &lt;select [(ngModel)]="address.state"&gt;
      &lt;option *ngFor="let state of states"&gt;{{state}}&lt;/option&gt;
    &lt;/select&gt;
</code></pre></div>
<p dir="auto">the state selection for the address "Chicaco, Illinois" is shown as "California" rather than "Illinois"</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Should be "Illinois" as shown in the workaround</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="https://plnkr.co/edit/NnnXJWz1oJuSgJLFtZWw?p=preview" rel="nofollow">https://plnkr.co/edit/NnnXJWz1oJuSgJLFtZWw?p=preview</a></p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows, Chrome</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.3.0</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all]</p>
</li>
</ul>
<p dir="auto">The two-way data binding was already broken before in Firefox in the sense that user input did not modify the model (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="150713786" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/8215" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/8215/hovercard" href="https://github.com/angular/angular/issues/8215">#8215</a>). This was fixed.</p>
<p dir="auto">However in the recent version there is now the problem that the initial model value (which is assigned to a <code class="notranslate">Control</code> in its constructor) is not applied to the view and instead the view initially displays the first possible select option. The bug occurs in Firefox as well as Chrome. Maybe the fix for <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="150713786" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/8215" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/8215/hovercard" href="https://github.com/angular/angular/issues/8215">#8215</a> introduced this new other bug.</p>
<p dir="auto">Reproducer: <a href="http://plnkr.co/edit/EGBoO2xRDJXByZykgiHF?p=info" rel="nofollow">http://plnkr.co/edit/EGBoO2xRDJXByZykgiHF?p=info</a><br>
You can see that <code class="notranslate">bCtrl</code> initially displays the value AA although CC is stored in the model.</p>