How to trigger ng-change from jquery?

Question

I have a select tag as follows:

<select ng-change="doSomething()" ng-model="myModel"> </select>

and I'm using a jQueryUI control for it (combobox), the event "change" triggered from jQuery doesn't trigger doSomething().

Do you know how to trigger ng-change from outside angular?

Answer 1

The question is not how to run some code, but rather how to trigger the change event. I found an angular-friendly way to do this. I have a jQuery UI slider that changes the value of another input which has the ng-change on it. The secret is that once you turn it into an angular.element you now have access to a method called triggerHandler. From what I've seen, using this would not be considered bad practice:

angular.element(document.getElementById('test')).triggerHandler('change');

tymeJV's answer did angular.element("#test") directly without using jQuery, but I got a console error and broken functionality that way. This version works without any dependencies.

Answer 2

Ugh - this is terrible practice - but you can use angular.element and get the scope from an element that resides within the target controller.

Example:

<div ng-controller="myApp">
    <span id="test"></span>
</div>

Javascript:

var scope = angular.element("#test").scope();
scope.doSomething();

Your scope variable now has access to all the methods defined on the myApp controller.