Angular: <select> and <options>

http://angularjs.org/

by LatencyMachine

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
<div ng-controller="MyCtrl as ctrl">
    <div>selectedUnitOrdinal: {{ctrl.selectedUnitOrdinal}}</div>
    <p>
        1: <select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.id as unit.text for unit in ctrl.unitsOptions"></select>
        I cannot get simple ordinal ID's to work.
    </p>
    <p>
        2: <select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.text for unit in ctrl.unitsOptions track by unit.id"></select>
        No luck with 'track by' either.
    </p>
    <p>
        3: <select ng-model="ctrl.selectedUnitOrdinalAsString" ng-options="unit.id as unit.text for unit in ctrl.unitsOptions"></select>        
        If I use a string instead of number in the model, initial selection works!
    </p>    
    <p>
        4: <select ng-model="ctrl.selectedUnitOrdinal">
            <option ng-repeat="unit in ctrl.unitsOptions" value="{{unit.id}}" ng-selected="ctrl.selectedUnitOrdinal == unit.id">{{unit.text}}
            </option>
        </select>        
        This works, but is crappy.
    </p>
    <p>
        (Note that if you change the selection in #4, then #1 starts working right.)
    </p>
    <hr />
    <div>selectedUnitObject: {{ctrl.selectedUnitObject}}</div>
    <select ng-model="ctrl.selectedUnitObject" ng-options="unit.text for unit in ctrl.unitsOptions"></select>
    <p>This works fine.</p>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

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;
    self.selectedUnitOrdinalAsString = "4";
    self.selectedUnitObject = self.unitsOptions[2];
});