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,
}


        

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.

Answer 2

In a function if the below code is added and the same is called from the ng-init then the issue is also getting resolved. This will resolve the string comparison issue.

$scope.Ctrl.type = "" + $scope.Ctrl.type + "";

Answer 3

I happens because you didn't initiated selected value. Try to set init value with ng-init:

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

See this Demo Fiddle where we have 2 combos with and without init value. You can see that one combo HTML seems like:

<select ng-model="selectedItem1"
 ng-options="selectedItem1.name as selectedItem1.name for selectedItem1 in values" class="ng-pristine ng-valid">
   <option value="?" selected="selected"></option>
   <option value="0">General</option>
   <option value="1">Super</option>
   <option value="2">Trial</option>
 </select>

The proper one:

<select ng-model="selectedItem" 
        ng-options="selectedItem.name as selectedItem.name for selectedItem in values" 
        ng-init="selectedItem = values[1].name" class="ng-pristine ng-valid">
   <option value="0">General</option>
   <option value="1" selected="selected">Super</option>
   <option value="2">Trial</option>
</select>

Answer 4

I often run into this when using number id's. My way around this quirk is to add ''+ to convert it to string type:

<select ng-options="''+u.id as u.name for u in users"