Angular select keeps generating default missing option

Question

I have a select being rendered inside of an agGrid . Nothing exceptionally complicated.

<select ng-model="data.stdPayerClassFnbr" ng-change="vm.save(data)" style="width: 100%"
        ng-options="item.stdPayerClass for item in vm.payerClassList track by item.id">
</select>

The crazy thing is this; I keep getting the missing value option:

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

Even though the value of data.stdPayerClassFnbr exists in the list of rendered options:

<option value="1" label="TBD">TBD</option>

The underlying data type of both data.stdPayerClassFnbr and item.id is int ; however I've tried making them both string by executing a map against their values before binding them. That did not help. I've got to be configuring this select wrong.

I've also tried the ng-repeat approach:

<select ng-model="data.stdPayerClassFnbr" ng-change="vm.save(data)" style="width: 100%">
    <option ng-repeat="item in vm.payerClassList" value="{{item.id}}">{{item.stdPayerClass}}</option>
</select>

This did not help either.

Answer 1

Make sure your stdPayerClassFnbr model object has the same properties as the payerClassList[x] items. Especially properties id and stdPayerClass

Answer 2

I found the issue. It was the track by expression. Since I was binding to an array of objects that came back from a lookup, when selecting or looking for a value, it was looking for the entire object by reference. Removing the track by expression caused the binding to work directly on the numeric value:

<select ng-model="data.stdPayerClassFnbr" ng-change="vm.save(data)" style="width: 100%"
        ng-options="item.id as item.stdPayerClass for item in vm.payerClassList">
</select>

This generates a very different list of options:

<option value="number:1" label="TBD" selected="selected">TBD</option>

I hope this helps somebody in the future! It may even help me one day!