title: assign select initial value in angular4
body: <p>In my angular value i have a select for changing timezone.
  this.userTimeZone is an object in my component.</p>
  
  <pre><code>{
  AdjustmentRules:null
  BaseUtcOffset:"-04:30:00"
  DaylightName:"Venezuela Daylight Time"
  DisplayName:"(UTC-04:30) Caracas"
  Id:"Venezuela Standard Time"
  StandardName:"Venezuela Standard Time"
  SupportsDaylightSavingTime:false}
  </code></pre>
  
  <p>My select option looks like this:</p>
  
  <pre><code>&lt;select name="timeZones" [(ngModel)]="userTimeZone" (change)="setTimezoneId($event)" class="form-control"&gt;
     &lt;option *ngFor="let time of timezones" [ngValue]="time"&gt;{{time.DisplayName}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I'm unable to set the initial value of the select.</p>
  
  <p>Though userTimeZone has a value the select shows blank on loading.</p>
  
  <p>If i give userTimeZone.Id and [ngValue]="time.id" the option gets selected but then the value returned on change is only the id and not the whole object.</p>
  
  <p>I want the entire object when the select option changes ans also set the initial value of the select.</p>
  
  <p>No sure what's is wrong here.Please guide</p>
  
  <p>Thanks</p>