title: AngularJS - Changing text of default option inside ngOptions
body: <p>I have a select menu using <code>ng-options</code> to repeat the options, and I have a default <code>&lt;option&gt;</code> inside the menu:</p>
  
  <pre><code>&lt;select ng-model="selected" ng-options="d.id as d.value for d in data"&gt;
    &lt;option value=""&gt;Choose an option&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>Problem:</strong> I want to make it so that the text inside that default option changes based off another property in the <code>$scope</code>, and I tried the following and it doesn't work:</p>
  
  <pre><code>&lt;select ng-model="selected" ng-options="d.id as d.value for d in data"&gt;
    &lt;option value="" ng-if="!optional"&gt;Choose an option&lt;/option&gt;
    &lt;option value="" ng-if="optional"&gt;Choose an option (optional)&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>It seems it will only show one default <code>&lt;option&gt;</code> element, so I also tried the following with <code>ng-show</code> but it doesn't work either:</p>
  
  <pre><code>&lt;select ng-model="selected" ng-options="d.id as d.value for d in data"&gt;
    &lt;option value=""&gt;Choose an option &lt;span ng-show="optional"&gt;(optional)&lt;/span&gt;&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I know you can also do <code>&lt;option ng-repeat&gt;</code> inside the select menu, but the data for the options comes from an AJAX call and doesn't update correctly when the data first comes in, so I'm sticking to using <code>&lt;select ng-options&gt;</code>.</p>
  
  <p><a href="http://jsfiddle.net/udu9byka/1/" rel="nofollow">Here's a JSFiddle</a> with the problem.</p>
  
  <p>Any suggestions for how I could go about getting this to work?</p>