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

[martin-wintz]

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]"

[jr314159]

Yeah this behavior is sort of alluded to in the example in the angular docs:

http://docs.angularjs.org/api/ng.directive:select

I'm not sure if this is really a bug with the chosen directive. Maybe just need to add some documentation for these cases.

[martin-wintz]

Strange, for some reason I thought I had already tried adding the placeholder option to no avail (in my own application), but I'm not sure what I did instead because now that seems to fix it! Thanks!

I agree, it seems sufficient to document that the placeholder option is mandatory and update the examples.

[leoasis]

I think this is a bug with the directive. angular-chosen should update the options whenever angular removes that empty generated option to allow for the case when the model is not any of the possible values.

[leoasis]

I managed to fix the issue by adding a watch on the ngModel expression and updating the chosen plugin on that element if that changed. It is a bit overkill, since we only need to update that when the empty option is generated/removed by angular, but it gets the job done.

scope.$watch(attr.ngModel, function(newVal, oldVal) {
  if (newVal !== oldVal) {
    stopLoading();
  }
});

[astral303]

If your ng-model expression always stays undefined before it gets a correct value, then you are going to be OK working around this with the placeholder.

However, if you are dereferencing a subobject that might be null at some point (e.g. "result.value", where $scope.result = null at some point), then placeholder is not enough of a workaround due to angular/angular.js#5442 .

Arguably we could watch out for external changes to the contents of select as mentioned in #27, but I'd rather AngularJS be fixed to not bug out.

[jr314159]

Updated docs. If anybody has a smarter solution that would allow us to avoid having to stick an empty option tag in every time, PRs would be welcome. Otherwise I think we can consider this case closed.

[DarkFisk]

seems to me we have the same problem, my solution inside: bug #33

[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 , otherwise you'll encounter strange off-by-one errors.

[sebferrer]

I just had the same problem lately, but I wasn't able to use the ng-init solution because my options were generated by ajax, so when the ng-init was applied, my array wasn't filled yet.

I used a very simple solution, I'm not sure if it's the best (I'm a beginner with Angular), but it worked very well for me. I just deleted the first empty option generated by Chosen, just before activate Chosen for my select : $('#mySelect option').eq(0).remove();