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 An

Answer 1

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):

<label ng-click="onCompleteTodo(todo)">
  <input type='checkbox' ng-model="todo.done">
  {{todo.text}}
</label>

Working example: http://jsfiddle.net/b3NLH/1/

Answer 2

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.

Answer 3

.task{ng:{repeat:'task in model.tasks'}}
  %input{type:'checkbox',ng:{model:'$parent.model.tasks[$index].enabled'}}

Answer 4

Replacing ng-model with ng-checked works for me.