Clicking a checkbox with ng-click does not update the model

Question

Clicking on a checkbox and calling ng-click  the model is not updated before ng-click kicks in so the checkbox value is wrongly presented in the UI   This works in AngularJS 1 0 7 and seems broken in Angualar 1 2-RCx    lt div ng-app  myApp  ng-controller  Ctrl  gt   lt li  ng-repeat  todo in todos  gt     lt input type  checkbox  ng-click  onCompleteTodo todo   ng-model  todo done  gt        todo text    lt  li gt    lt hr gt  task    todoText    lt hr gt  lt h2 gt Wrong value lt  h2 gt       done    doneAfterClick       and controller   angular module  myApp          controller  Ctrl      scope   function  scope         scope todos             text    get milk             done   true                       text    get milk2             done   false                             scope onCompleteTodo   function todo        console log  onCompleteTodo -done      todo done           todo text        scope doneAfterClick todo done       scope todoText   todo text                Broken Fiddle w  Angular 1 2 RCx  - http   jsfiddle net supercobra ekD3r   Working fidddle w  Angular 1 0 0   - http   jsfiddle net supercobra 8FQNw

User · Answer

Why dont you use    watch  todo  function         Or another solution would be to set the todo done inside the ng-click callback and only use ng-click   lt div ng-app  myApp  ng-controller  Ctrl  gt   lt li  ng-repeat  todo in todos  gt   lt input type  checkbox  ng-click  onCompleteTodo todo   gt        todo text     todo done     and   scope onCompleteTodo   function todo            todo done    todo done    toggle value         console log  onCompleteTodo -done      todo done           todo text            scope current   todo

User · Answer

As reported in https   github com angular angular js issues 4765  switching from ng-click to ng-change seems to fix this  I am using Angular 1 2 14

User · Answer

I just replaced ng-model with ng-checked and it worked for me   This issue was when I updated my angular version from 1 2 28 to 1 4 9   Also check if your ng-change is causing any issue here  I had to remove my ng-change as-well to make it working

User · Answer

Usually this is due to another directive in-between your ng-controller   and your input that is creating a new scope  When the select writes   out it value  it will write it up to the most recent scope  so it   would write it to this scope rather than the parent that is further   away        The best practice is to never bind directly to a variable on the scope   in an ng-model  this is also known as always including a  dot  in   your ngmodel  For a better explanation of this  check out this video   from John       http   www youtube com watch v DTx23w4z6Kc   Solution from  https   groups google com forum   topic angular 7Nd me5YrHU

User · Answer

How about changing  lt input type  checkbox  ng-click  onCompleteTodo todo   ng-model  quot todo done quot  gt   to  lt input type  checkbox  ng-change  onCompleteTodo todo   ng-model  quot todo done quot  gt   From docs   Evaluate given expression when user changes the input  The expression is not evaluated when the value change is coming from the model  Note  this directive requires ngModel to be present

User · Answer

It is kind of a hack but wrapping it in a timeout seems to accomplish what you are looking for   angular module  myApp            controller  Ctrl      scope     timeout   function   scope   timeout         scope todos               text    get milk            done   true                   text    get milk2                done   false               scope onCompleteTodo   function  todo             timeout function                console log  onCompleteTodo -done      todo done           todo text                scope doneAfterClick   todo done               scope todoText   todo text

User · Answer

task ng  repeat  task in model tasks       input type  checkbox  ng  model   parent model tasks  index  enabled

User · Answer

Replacing ng-model with ng-checked works for me

User · Answer

The ordering between ng-model and ng-click seems to be different and it s something you probably shouldn t rely on  Instead you could do something like this    lt div ng-app  myApp  ng-controller  Ctrl  gt   lt li  ng-repeat  todo in todos  gt   lt input type  checkbox  ng-model  todo done  ng-click  onCompleteTodo todo   gt        todo text     todo done    lt  li gt        lt hr gt          task    current text            lt hr gt               lt h2 gt Wrong value lt  h2 gt           done    current done    lt  div gt    And your script   angular module  myApp            controller  Ctrl      scope   function  scope              scope todos                 text    get milk                 done   true                               text    get milk2                 done   false                                         scope current    scope todos 0             scope onCompleteTodo   function todo                console log  onCompleteTodo -done      todo done           todo text          scope doneAfterClick todo done         scope todoText   todo text          scope current   todo                What s different here is whenever you click a box  it sets that box as what s  current  and then display those values in the view  http   jsfiddle net QeR7y

User · Answer

The order in which ng-click and ng-model will be executed is ambiguous  since neither explicitly set their priority   The most stable solution to this would be to avoid using them on the same element    Also  you probably do not want the behavior that the examples show  you want the checkbox to respond to clicks on the complete label text  not only the checkbox  Hence  the cleanest solution would be to wrap the input  with ng-model  inside a label  with ng-click     lt label ng-click  onCompleteTodo todo   gt     lt input type  checkbox  ng-model  todo done  gt      todo text    lt  label gt    Working example  http   jsfiddle net b3NLH 1

[angularjs] Clicking a checkbox with ng-click does not update the model

Examples related to angularjs

Examples related to checkbox