ng-model doesn't work along with ng-click

Question

It's all about this block:

<div class="panel done-{{ todo.done }}" ng-repeat="todo in todos()" ng-click="changeStatus(todo)">
  <input type="checkbox" ng-model="todo.done"> {{ todo.title }}
</div>

Removing the outer ng-click the checkbox works fine, not doing so just the ng-click will work. Ng-click will change the value of the checkbox though while the checkbox doesn't change state.

$scope.changeStatus = function(todo) {
  todo.done = ! todo.done;
};

Answer 1

the ng-click should go in the input field:

<div class="panel done-{{ todo.done }}" ng-repeat="todo in todos()" >
  <input type="checkbox" ng-model="todo.done" ng-click="changeStatus(todo)"/> {{ todo.title }}
</div>

and your function should have the ! operator attached to the variable or it will fail:

$scope.changeStatus = function(todo) {
  todo.done = !todo.done;
};

Answer 2

Got it working now. This might be a bit ugly but it works:

<div class="panel done-{{ todo.done }}" ng-repeat="todo in todos()" ng-click="changeStatus(todo)">
  <input type="checkbox" ng-model="todo.done" ng-click="changeStatus(todo)"> {{ todo.title }}
</div>