title: Angular 2 - Setting selected value on dropdown list
body: <p>I have run into an issue in pre-selecting values on a dropdown list in Angular 2.   </p>
  
  <p>I set an array of colours in the component which I bind successfully to the dropdown list. The issue I'm experiencing is with pre-selecting a value on page init. </p>
  
  <p>The line <code>[selected]="car.color.id == x.id"</code> should be selecting the value which has been set on the car model <code>this.car.color = new Colour(-1,'');</code> however this only works when  I set the car colour id to the last item in the list (in this case black) <code>this.car.color = new Colour(4,'');</code>  </p>
  
  <p>I am using the latest version of Angular (rc3) and have experienced the same issues in rc1 and rc2. </p>
  
  <p>Here is a plunker showing the issue. </p>
  
  <p><a href="https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview" rel="noreferrer">https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview</a></p>
  
  <p>Another odd aspect is that when looking at the meta data Angular has set the selected value to true.</p>
  
  <p><a href="https://i.stack.imgur.com/TYQxn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TYQxn.png" alt="enter image description here"></a></p>
  
  <p>But the dropdown still appears empty.</p>
  
  <p><a href="https://i.stack.imgur.com/td0jh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/td0jh.png" alt="enter image description here"></a></p>
  
  <p>It appears to be a seperate issue from these related questions.</p>
  
  <p><a href="https://stackoverflow.com/questions/36723173/angular-2-set-begin-value-of-select">Angular 2 Set begin value of select</a></p>
  
  <p><a href="https://stackoverflow.com/questions/35945001/binding-select-element-to-object-in-angular-2">Binding select element to object in Angular 2</a></p>
  
  <p><a href="https://stackoverflow.com/questions/33181936/how-to-use-select-option-ngfor-on-an-array-of-objects-in-angular2">How to use select/option/NgFor on an array of objects in Angular2</a></p>
  
  <p>Regards</p>
  
  <p>Steve</p>
  
  <p><strong>Component template</strong></p>
  
  <pre><code>   &lt;div&gt;
          &lt;label&gt;Colour&lt;/label&gt;
          &lt;div&gt;
              &lt;select [(ngModel)]="car.colour""&gt;
                  &lt;option *ngFor="let x of colours" [value]="x.id" [selected]="car.color.id == x.id"&gt;{{x.name}}&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {AbstractControl,FORM_DIRECTIVES } from '@angular/common';
  
  @Component({
      selector:'dropdown',
      templateUrl:'app/components/dropdown/dropdown.component.html',
      directives:[FORM_DIRECTIVES]
  })
  export class DropdownComponent implements OnInit
  {
      car:Car = new Car();
      colours = Array&lt;Colour&gt;();
  
      ngOnInit(): void {
  
          this.colours = Array&lt;Colour&gt;();
          this.colours.push(new Colour(-1, 'Please select'));
          this.colours.push(new Colour(1, 'Green'));
          this.colours.push(new Colour(2, 'Pink'));
          this.colours.push(new Colour(3, 'Orange'));
          this.colours.push(new Colour(4, 'Black'));
  
          this.car = new Car();
          this.car.color = new Colour(-1,'');        
      }
  }
  
  export class Car
  {
      color:Colour;
  }
  
  export class Colour
  {
      constructor(id:number, name:string) {
          this.id=id;
          this.name=name;
      }
  
      id:number;
      name:string;
  }
  </code></pre>