Initial ng-model value not set in select

Question

I have an enum (I code using TypeScript):

export enum AddressType {     NotSet = 0,      Home = 1,     Work = 2,     Headquarters = 3,      Custom = -1, } 

Then in my controller I have a field named type, into which I set the initial value that should be selected in the select input (I set it to AddressType.Headquarters).

Finally, in my HTML I put the following:

<select ng-model="Ctrl.type" ng-options="addressType for addressType in Ctrl.getAddressTypes()"></select> 

Everything seems to work fine except one thing: for some reason Angular does not select "3" (Headquarters) initially in the select after all bindings have been updated. Angular creates an extra option like this instead:

<option value="?" selected="selected"></option> 

So for some reason Angular cannot figure the initial option to select in the combo.

If the user selects another option of the combo box, Ctrl.type is updated properly so the binding works fine for that part. Basically my problem is just that the option that should be selected initially is not selected as expected.

What am I missing here that is causing that problem?

Answer 1

Found the problem:

The array returned by Ctrl.getAddressTypes() was an array of strings:

["0", "1", "2", "3", "1"] 

and what was stored in Ctrl.type was of type number.

AngularJS compares the array supplied to ng-options to the value supplied to ng-model using the '===' operator. 3 does not equal to "3" in that case - that's why it did not work.