angular sets ng-model with primitive value

[tunguski]

I've migrated to angular 1.2.7, select2 3.4.5, ui-select2 0.0.5 from angular 1.2.0-rc1 and ui-select2 0.0.4. I have $watch expression for value which is ng-model for input based select. Problem is that angular.js sets ng-model value to id of choosen object and after that ui-select2 sets properly ng-model to choosen object. But my $watch function throws errors invoked for primitive value id. Everything works ok I think, because ui-select2 sets value after angular.js, but this look scary in console.

Did anybody found same problem? Is there any way to remove angular.js binding of input's ng-model and leave ui-select2's only?

Below are Chromium's 31.0.1650.63 Ubuntu 13.10 stacktraces for invoked $watch handler.

First stacktrace when new ng-model value is object's id

(anonymous function) (schedule.js:314)
ng.config.$provide.decorator.$delegate.__proto__.$watch.applyFunction (VM12519:778)
$get.Scope.$digest (angular.js:11802)
ng.config.$provide.decorator.$delegate.__proto__.$digest (VM12519:844)
$get.Scope.$apply (angular.js:12055)
ng.config.$provide.decorator.$delegate.__proto__.$apply (VM12519:855)

listener (angular.js:16050)

jQuery.event.dispatch (jquery.js:5095)
jQuery.event.add.elemData.handle (jquery.js:4766)
jQuery.event.trigger (jquery.js:5007)
(anonymous function) (jquery.js:5691)
jQuery.extend.each (jquery.js:657)
jQuery.fn.jQuery.each (jquery.js:266)
jQuery.fn.extend.trigger (jquery.js:5690)

clazz.triggerChange (select2.js:1065)
clazz.onSelect (select2.js:2256)
clazz.selectHighlighted (select2.js:1718)
(anonymous function) (select2.js:748)
clazz.bind (select2.js:651)
jQuery.event.dispatch (jquery.js:5095)
jQuery.event.add.elemData.handle (jquery.js:4766)

Second stacktrace when ng-model is object

(anonymous function) (schedule.js:314)
ng.config.$provide.decorator.$delegate.__proto__.$watch.applyFunction (VM12519:778)
$get.Scope.$digest (angular.js:11802)
ng.config.$provide.decorator.$delegate.__proto__.$digest (VM12519:844)
$get.Scope.$apply (angular.js:12055)
ng.config.$provide.decorator.$delegate.__proto__.$apply (VM12519:855)

(anonymous function) (select2-angular.js:156)

jQuery.event.dispatch (jquery.js:5095)
jQuery.event.add.elemData.handle (jquery.js:4766)
jQuery.event.trigger (jquery.js:5007)
(anonymous function) (jquery.js:5691)
jQuery.extend.each (jquery.js:657)
jQuery.fn.jQuery.each (jquery.js:266)
jQuery.fn.extend.trigger (jquery.js:5690)

clazz.triggerChange (select2.js:1065)
clazz.onSelect (select2.js:2256)
clazz.selectHighlighted (select2.js:1718)
(anonymous function) (select2.js:748)
clazz.bind (select2.js:651)
jQuery.event.dispatch (jquery.js:5095)
jQuery.event.add.elemData.handle (jquery.js:4766)

[lucassus]

I have the same problem, see https://github.com/9ci/angle-grinder/issues/146 Everything works fine on AngularJS 1.2.2

[MaximilianoRicoTabo]

I saw this problem too with AngularJS 1.2.8. In my case I tried to downgrade to ui-select2 0.0.2 and Select2 3.4.2 which were working well with AngularJS 1.0.8 but didn't work. I guess It's just AngularJS issue. I'll downgrade Angular to 1.2.1 for now but would be nice to play with 1.2.8 instead. Thanks

[deitch]

I just killed an hour trying to figure out why this is happening, although I have it in reverse order. First it calls it with the object, and only after with the ID. Since I will call a page load anyways, I don't care which I get, as long as it is consistently one of them.

Anyone have any workarounds?

[tunguski]

I have ugly workaround - modifies select2.js, not angular...

I've changed conditions in lines 2451 and 3235

if (arguments.length === 0) {

to

if (arguments.length === 0 || this.opts.element.data("select2-change-triggered")) {

This makes select2 ignore state changes during execution of state change handling function. Works for me for some time.

Waiting for real fix though.

[typeofweb]

I have the same problem. I upgraded from AngularJS 1.1.15 to 1.2.18 and now I have it like @deitch described - first it's the object and after that it's ID. It is a real problem for me since I rely on that value later :-1:

@tunguski your fix doesn't work (anymore?). Have you fixed this issue?

[tunguski]

Still works for me, only line numbers changed.

Have to look for:

    // multi
    data: function(values, triggerChange) {
        var self=this, ids, old;
        if (arguments.length === 0) {

and:

    // single
    data: function(value) {
        var data,
            triggerChange = false;

        if (arguments.length === 0) {

and change first if statement as I wrote in previous comment.

Tested on select2 3.5.1, angular 1.3.0-beta.17.

[sachindu]

I am using Angular 1.2.18 and Select2 3.5.1. but select2 is not getting initialized with ng-model even it is getting selected in list but not coming up on top.. Please advise.