ng-model bug: Options shifted by one after selecting the first time

If you use the ng-model attribute, all the data-option-array-index attributes for li the elements under the chosen-results list are shifted by one (1, 2, 3… instead of 0, 1, 2…). Selection works the first time – I’m guessing because the placeholder option is in the array and shifting all the other elements – but every subsequent selection actually assigns the value after the selected value to the model (click on the second option, and the model is assigned the value for the third option). Picking the last value causes JQuery to throw an error.

How to reproduce: Open angular-chosen/example/index.html Pick a value from “Chosen with static options” Pick another one and watch the model update to the value after it (or if the value selected is the last one, see JQuery throw an error in the console)

I’ll try to see if I can fix it.

[rhettl]

I don’t know the exact cause, but I figured out a fix for it. and I cannot believe how dumb this is:

<select style="width: 100%" data-chosen data-disable-search="true"
            data-ng-model="product"
            data-ng-options="prod.guid for prod in products">
        <option><option>
</select>

I started thinking the issue may be the null li that is created when $scope.product has no value during init. So I figured that if I gave it a value before loading chosen that it would fix the issue. I tried this and it worked! I was astounded I though I would at least need to add seleced="selected" to the option. If this didn’t work I was going to add ng-init="product = products[0]"

[harunlegoz]

I think that this issue is covered in the recent documentation. Just add an empty valued option element:

https://github.com/localytics/angular-chosen

Also important: if your ngModel is null or undefined, you must manually include an empty option inside your <select>, otherwise you’ll encounter strange off-by-one errors.