title: Angular select option with selected attribute not working
body: <p>Using Angular 4, I have a html template and I want a selection box with two options. One of those options should be pre-selected by default.</p>
  
  <pre><code>&lt;select name="rate" #rate="ngModel" ngModel required&gt;
      &lt;option selected value="hr"&gt;hr&lt;/option&gt;
      &lt;option value="yr"&gt;yr&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <h3>Details:</h3>
  
  <p>I assign <code>#rate="ngModel"</code> so that I can reference the value somewhere else in the template, in a conditional statement or with interpolation <code>{{rate.value}}</code>. For that to work I simply add <code>ngModel</code> to the tag. I'm not binding to anything in the component class as this control is only used to provide it's value to another control in the same template.</p>
  
  <h3>Issue:</h3>
  
  <p>In Chrome, and Microsoft Edge, the box is empty, no default value selected. If I get rid of <code>#rate="ngModel" ngModel</code> it works. However, I need the reference to <code>rate.value</code>.</p>
  
  <p>I tried various combinations of ngValue, value, [ngValue], [value], but I'm not trying to bind the value to a model and I'm not using a ngFor loop.
  There is no further styling on the select box either.</p>