title: Default select value for dropdown is not straight forward in Angular 7
body: <p>I've been working with Angular 7 recently, and finding some strange stuff happening when trying to display a dropdown list, and showing a default value within this list. Here are two separate lists respectively:</p>
  
  <p>sample.component.html</p>
  
  <pre><code> &lt;select [(ngModel)]="organization" id="organization" required&gt;
            &lt;option *ngFor="let organization of organizations" [value]="organization.id" [ngValue]="organization.name"&gt;{{organization.name}}&lt;/option&gt;
          &lt;/select&gt;
          &lt;br&gt;
  </code></pre>
  
  <p>I find that the above code displays the following in my browser:</p>
  
  <p><a href="https://i.stack.imgur.com/9O1Fa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9O1Fa.png" alt="enter image description here"></a></p>
  
  <p>Notice how the default value is set in the above, but in the next drop down the default value isn't set:</p>
  
  <p>sample.component.html</p>
  
  <pre><code>&lt;select [(ngModel)]="seniorExperience" id="seniorExperience" required&gt;
            &lt;option *ngFor="let seniorExperience of seniorExperiences" [value]="seniorExperience.seniorExperienceId" [ngValue]="seniorExperience.seniorExperienceName"&gt;{{seniorExperience.seniorExperienceName}}&lt;/option&gt;
          &lt;/select&gt;
  </code></pre>
  
  <p>The browser displays the following:</p>
  
  <p><a href="https://i.stack.imgur.com/GNyPw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GNyPw.png" alt="enter image description here"></a></p>
  
  <p>Why is the second dropdown not populated with the a default, whilst following the same syntax? From searching and reading docs I presumed that [ngValue] sets the default value of the dropdown, which seems to work for the first dropdown. Is there a better way to set the default select?</p>