Binding select element to object in Angular
<p>I'd like to bind a select element to a list of objects -- which is easy enough:</p>
<pre class="lang-js prettyprint-override"><code>@Component({
   selector: 'myApp',
   template: 
      `&lt;h1&gt;My Application&lt;/h1&gt;
       &lt;select [(ngModel)]=&quot;selectedValue&quot;&gt;
          &lt;option *ngFor=&quot;#c of countries&quot; value=&quot;c.id&quot;&gt;{{c.name}}&lt;/option&gt;
       &lt;/select&gt;`
    })
export class AppComponent{
   countries = [
      {id: 1, name: &quot;United States&quot;},
      {id: 2, name: &quot;Australia&quot;}
      {id: 3, name: &quot;Canada&quot;},
      {id: 4, name: &quot;Brazil&quot;},
      {id: 5, name: &quot;England&quot;}
   ];
   selectedValue = null;
}
</code></pre>
<p>In this case, it appears that <code>selectedValue</code> would be a number -- the id of the selected item.</p>
<p>However, I'd actually like to bind to the country object itself so that <code>selectedValue</code> is the object rather than just the id.  I tried changing the value of the option like so:</p>
<pre><code>&lt;option *ngFor=&quot;#c of countries&quot; value=&quot;c&quot;&gt;{{c.name}}&lt;/option&gt;
</code></pre>
<p>but this does not seem to work.  It seems to place an object in my <code>selectedValue</code> -- but not the object that I'm expecting.  You can <a href="http://plnkr.co/edit/HGRGv33EFwxDsSnELofk?p=preview" rel="noreferrer">see this in my Plunker example</a>.</p>
<p>I also tried binding to the change event so that I could set the object myself based on the selected id; however, it appears that the change event fires before the bound ngModel is updated -- meaning I don't have access to the newly selected value at that point.</p>
<p>Is there a clean way to bind a select element to an object with Angular 2?</p>