AngularJS ng-model binding not updating when changed with jQuery

Question

This is my HTML    lt input id  selectedDueDate  type  text  ng-model  selectedDate    gt    When I type into the box  the model is updated via the 2-way-binding mechanism  Sweet   However when I do this via JQuery         selectedDueDate   val dateText     It doesn t update the model  Why

User · Answer

I ve written this little plugin for jQuery which will make all calls to  val value  update the angular element if present    function    ng       use strict      var  val     fn val     save original jQuery function       override jQuery function     fn val   function  value           if getter  just return original     if   arguments length          return  val call this                 get result of original function     var result    val call this  value           trigger angular input  this 0  is the DOM object      ng element this 0   triggerHandler  input            return the original result     return result          window jQuery  window angular     Just pop this script in after jQuery and angular js and val value  updates should now play nice     Minified version    function n t   use strict  var r n fn val n fn val function n  if  arguments length return r call this  var e r call this n  return t element this 0   triggerHandler  input   e   window jQuery window angular       Example    x000D   x000D     the function x000D   function    ng    x000D     use strict   x000D     x000D    var  val     fn val  x000D     x000D      fn val   function  value    x000D      if   arguments length    x000D        return  val call this   x000D        x000D       x000D      var result    val call this  value   x000D       x000D      ng element this 0   triggerHandler  input    x000D       x000D      return result  x000D       x000D      x000D     window jQuery  window angular   x000D   x000D   function ng    x000D    ng module  example       x000D       controller  ExampleController   function  scope    x000D         scope output    output   x000D         x000D         scope change   function     x000D           scope output         scope input  x000D          x000D          x000D     window angular   x000D   x000D   function       x000D      function     x000D      var button       button    x000D     x000D      if  button length  x000D        console log  hello  button    x000D       x000D      button click function     x000D        var input       input    x000D         x000D        var value   parseInt input val     x000D        value   isNaN value    0   value  x000D         x000D        input val value   1   x000D          x000D        x000D     window jQuery   x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div ng-app  example  ng-controller  ExampleController  gt  x000D     lt input type  number  id  input  ng-model  input  ng-change  change      gt  x000D     lt span gt   output   lt  span gt  x000D     lt button id  button  gt   lt  button gt  x000D   lt  div gt  x000D   x000D   x000D      This answer was copied verbatim from my answer to another similar question

User · Answer

Try this  var selectedDueDateField   document getElementById  selectedDueDate    var element   angular element selectedDueDateField   element val  new value here    element triggerHandler  input

User · Answer

Just use       selectedDueDate   val dateText  trigger  input      instead of       selectedDueDate   val dateText

User · Answer

Whatever happens outside the Scope of Angular  Angular will never know that    Digest cycle put the changes from the model -  controller and then from controller -  model    If you need to see the latest Model  you need to trigger the digest cycle   But there is a chance of a digest cycle in progress  so we need to check and init the cycle   Preferably  always perform a safe apply           scope safeApply   function fn                if  this  root                    var phase   this  root   phase                  if  phase      apply     phase      digest                         if  fn  amp  amp   typeof  fn       function                              fn                                            else                       this  apply fn                                                       scope safeApply function                 your function here

User · Answer

Just run the following line at the end of your function     scope  apply

User · Answer

AngularJS pass string  numbers and booleans by value while it passes arrays and objects by reference  So you can create an empty object and make your date a property of that object  In that way angular will detect model changes   In controller  app module  yourModule   controller  yourController  function  scope    scope vm  selectedDate           In html   lt div ng-controller  yourController  gt   lt input id  selectedDueDate  type  text  ng-model  vm selectedDate    gt   lt  div gt

User · Answer

I have found that if you don t put the variable directly against the scope it updates more reliably   Try using some  dateObj selectedDate  and in the controller add the selectedDate to a dateObj object as so    scope dateObj    selectedDate  new Date      This worked for me

User · Answer

You have to trigger the change event of the input element because ng-model listens to input events and the scope will be updated  However  the regular jQuery trigger didn t work for me  But here is what works like a charm      myInput   0  dispatchEvent new Event  input     bubbles  true        Works   Following didn t work      myInput   trigger  change       Did t work for me   You can read more about creating and dispatching synthetic events

User · Answer

Angular doesn t know about that change  For this you should call  scope  digest   or make the change inside of  scope  apply      scope  apply function            every changes goes here        selectedDueDate   val dateText          See this to better understand dirty-checking  UPDATE  Here is an example

User · Answer

Just use        selectedDueDate   val dateText  trigger  input

[javascript] AngularJS : ng-model binding not updating when changed with jQuery

Examples related to javascript

Examples related to jquery

Examples related to angularjs

Examples related to data-binding

Examples related to angular-ngmodel