$watch not firing on data change

angularjs jquery-select2 angular-ui-bootstrap
µBio picture µBio · Jul 22, 2013 · Viewed 86.3k times · Source

I have a watch setup against the model of a ui-select2 dropdown (from ui-bootstrap). The watch fires on load but not on data changes and I can't figure out why.

It isn't the usual problem of not $apply'ing the model change or not using the third parameter for equality comparison (at least from my code).

What do I need to do to get it to fire?

Here is a plunk demonstrating the issue.

Answer

Casey Flynn picture Casey Flynn · Jul 22, 2013

Try passing true as a 3rd argument to .$watch()

$rootScope.Scope documentation

$watch(watchExpression, listener, objectEquality)

objectEquality(optional) – {boolean=} – Compare object for equality rather than for reference.

Related questions

set the width of select2 input (through Angular-ui directive)

I have problem making this plunkr (select2 + angulat-ui) work. http://plnkr.co/edit/NkdWUO?p=preview In local setup, I get the select2 work, but I cannot set the width as described in the docs. It is too narrow to …

Read More
How to use jQuery Select2 with AngularJS

I am trying to use jQuery (2.2.1) Select2 (3.5.2) with Angularjs (1.5) but am having a difficult time grabbing the data from the select box. I have tried ui-select and I could retrieve data... but would often crash the browser when searching, was …

Read More
Setting initial values of Angular-UI Select2 multiple directive

I have a select2 directive for a multiple select of countries with a custom query to grab the data: // Directive <input ng-model="filters.countries" ui-select2="filters.countryOptions" data-placeholder="Choose a country..."> // filters.countryOptions { multiple: true, query: function() { get_…

Read More