title: AngularJS select option not displaying in IE 10
body: <p>We are attempting to resolve a maddening bug in IE 10 in which the option label of the selected option does not get rendered for an Angular <code>&lt;select&gt;</code>.  Instead, the label of the option appears as <code>{{option}}</code>, implying that the directive could not be resolved.  What is worse is that this problem does not happen in IE 11 or later, or Chrome.  Here is the relevant code:</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;select class="settings-select-box" name="LOCATION_UPDATE_FREQUENCY"
          id="LOCATION_UPDATE_FREQUENCY"
          data-ng-model="configurations.LOCATION_UPDATE_FREQUENCY"&gt;
      &lt;option data-ng-repeat="option in frequency" value="{{option}}"&gt;{{option}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>In the controller JS code we define <code>frequency</code> as a static array, since the choices will never change:</p>
  
  <pre><code>$scope.frequency = ["Never","Daily","Weekly","Monthly"];
  </code></pre>
  
  <p>The scoped variable used for the model is <code>configurations.LOCATION_UPDATE_FREQUENCY</code>, and is defined using a value from the database.  Persisting to the database works on IE 10 and other browsers, which means that binding from the UI to the server appears to be working without issue.</p>
  
  <p>What is really strange about this bug is that the correct option still gets selected in IE 10, but the label is broken or not being rendered properly.</p>
  
  <p>Here is a screen capture to further illustrate the problem:</p>
  
  <p><a href="https://i.stack.imgur.com/JrpuQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JrpuQ.png" alt="enter image description here"></a></p>