My select menu is set up to repeat the options using ng-options, and there is a default <option> included in the menu:
<select ng-model="selected" ng-options="d.id as d.value for d in data">
<option value="">Choose an option</option>
</select>
Issue: I am trying to change the text inside the default option based on another property in the $scope. However, my attempts to do so have not been successful. Here is what I tried:
<select ng-model="selected" ng-options="d.id as d.value for d in data">
<option value="" ng-if="!optional">Choose an option</option>
<option value="" ng-if="optional">Choose an option (optional)</option>
</select>
It seems that only one default <option> element is displayed. I also attempted to use ng-show but encountered the same issue:
<select ng-model="selected" ng-options="d.id as d.value for d in data">
<option value="">Choose an option <span ng-show="optional">(optional)</span></option>
</select>
Although it is possible to use <option ng-repeat> within the select menu, the data for the options is fetched from an AJAX call which leads to incorrect updating when the data first arrives. Therefore, I am sticking with <select ng-options>.
Feel free to check out this JSFiddle illustrating the problem.
Any suggestions on how to resolve this issue would be greatly appreciated!