Trouble setting ngModel for chosen dropdown programmatically.

Hi, I’m trying to programmatically set the value for some dropdowns using chosen, but I’m struggling to get the dropdown to actually display the corresponding value. I have a dropdown that looks like this:

<select name="testitem" class="form-control" chosen allow-single-deselect="true" ng-model="item.itemID" ng-options="option.optionID as option.Text for option in options track by option.optionID">
    <option value=""></option>
</select>

And my ngOptions data looks like this:

$scope.options = [
   {optionID: 101, Text: 'Text to display in options'},
   {optionID: 102, Text: 'Text to display in options 2'},
   {optionID: 103, Text: 'Text to display in options 3'}
];

In my Angular controller for the view, I’m immediately setting the data for $scope.options and then $scope.item.itemID, but no matter what value I throw in that itemID, the chosen dropdown doesn’t update to reflect it. I’ve checked the markup and verified that a <select> element containing <option> elements with optionIDs for their values is being generated and the values I’m choosing line up. I’m very confused, because we have another project that uses (key, value) syntax in the ngOptions attribute where this behavior works as expected. Is there something special about using (key, value) in ngOptions that allows chosen to respect the two-way data binding, or is there something else that I’m missing?

[cgatesman]

+1

I have found that this is broken only when using track by in the ng-options.

[leocaseiro]

@swiftened as same way you would do with a normal <select>, the correct way is using a model with your ID only. You don’t need track by in that case, like so:

<select name="testitem"
    chosen
    ng-model="testitem" allow-single-deselect="true"
    ng-options="option.optionID as option.Text for option in options">
    <option value=""></option>
</select>

$scope.options = [
   {optionID: 101, Text: 'Text to display in options'},
   {optionID: 102, Text: 'Text to display in options 2'},
   {optionID: 103, Text: 'Text to display in options 3'}
];

  $scope.testitem = 103; 

An example working http://plnkr.co/edit/UH35hn?p=preview