Despite my efforts, I am struggling to get an angular select with async to work properly. It seems to be mostly working, but not entirely.
Consider the controller below:
$scope.stuff = {};
$scope.stuff.blah = "SOME_KEY";
External.list().then( function (data ) {
$scope.stuff.sourceSystems =data;
});
When the values are displayed, everything looks good:
<select ng-model="stuff.blah">
<option ng-repeat="(key, value) in stuff.sourceSystems | orderBy" value="{{key}}">{{key}}</option>
</select>
However, there is an issue with this code that results in an extra, empty option at the beginning:
<select ng-model="stuff.blah" ng-options="key for (key, value) in stuff.sourceSystems | orderBy"></select>
In both cases, the existing value (SOME_KEY) that I have set is not selected by default. In the first case, the first value in the list is selected, while in the second case, a blank value is selected. However, the bound value remains as SOME_KEY. Interestingly, once I manually change the selected value, the bound value (blah) updates correctly.
This scenario is within a directive where bindToController is set to true.
Can you identify what I might be doing incorrectly?