title: Binding select element to object in Angular
body: <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>