$watch doesnt work in dynamic text input changed using JQuery

Question

The Value of my text input is dynamic , and changed using Jquery , however everything looks fine at this part , but when i add an ng-model to this input so i can $watch the change of its value USING Angularjs , here i faced a problem ! simply the angular doesnt not detect the change of the input VALUE , and i dont know why ? , but when i change it manually the $watch work fine , any solution ??

my input :

   <input type="text" data-ng-model="name">

$watch :

        $scope.$watch('name',
        function(newVal, oldVal, scope) {
            if (newVal === oldVal) {
// This will run only on the initialization of the watcher
                console.log("inisialisation");
            } else {
                console.log("changed");
// A change has occurred after initialization
            }
        });

Possible solutions [here](http://stackoverflow.com/q/23571184/901048) and [here](http://stackoverflow.com/q/18995723/901048) and [here](http://stackoverflow.com/q/21332671/901048) — Blazemonger, May 20 '14 at 14:20
The ang model will never know what you changed with a jQuery method, that's standard behaviour. But there's a trick, calling input.trigger('input'); after any input changes with jQuery ( http://stackoverflow.com/questions/17109850/update-angular-model-after-setting-input-value-with-jquery ) — alou, May 20 '14 at 14:21

score 0 · Accepted Answer · answered May 20 '14 at 14:21

If you change the value of a textfield outside of angular (i.e. through jQuery), then you have to call $scope.$apply within angular to trigger a digest cycle. Without a scope.apply, angular has no knowledge that something has changed within the application.

It's worth taking a look at this link for more information: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

$watch doesnt work in dynamic text input changed using JQuery

1 Answers1