I'm trying to use ng-options with a <select>
to bind a numeric integer value to a list of corresponding options. In my controller, I have something like this:
myApp.controller('MyCtrl', function() {
var self = this;
var unitOptionsFromServer = {
2: "mA",
3: "A",
4: "mV",
5: "V",
6: "W",
7: "kW"
};
self.unitsOptions = Object.keys(unitOptionsFromServer).map(function (key) {
return { id: key, text: unitOptionsFromServer[key] };
});
self.selectedUnitOrdinal = 4; // Assume this value came from the server.
});
HTML:
<div ng-controller="MyCtrl as ctrl">
<div>selectedUnitOrdinal: {{ctrl.selectedUnitOrdinal}}</div>
<select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.id as unit.text for unit in ctrl.unitsOptions"></select>
</div>
And here's a jsFiddle demonstrating the problem, and some other approaches I've taken but am not happy with.
The select option is being initialized with an empty value, instead of "mV" as expected in this example. The binding seems to work fine if you select a different option -- selectedUnitOrdinal updates properly.
I've noticed that if you set the initial model value to a string instead of a number, then the initial selection works (see #3 in the fiddle).
I really would like ng-options to play nice with numeric option values. How can I achieve this elegantly?