I am using the following code to programmatically uncheck a checkbox:

$('#someid').removeAttr('checked');

Here is the checkbox that is bound to an Angular model:

<input id="someid" ng-model="model.property" type="checkbox" value="true">

I can see that the checkbox is indeed unchecking. Why is the Angular model property not also updating (changing from true to false) and how can I obtain this desired behavior? I can update the model and have the checkbox update no problem.

I am using the following code to programmatically uncheck a checkbox:

$('#someid').removeAttr('checked');

Here is the checkbox that is bound to an Angular model:

<input id="someid" ng-model="model.property" type="checkbox" value="true">

I can see that the checkbox is indeed unchecking. Why is the Angular model property not also updating (changing from true to false) and how can I obtain this desired behavior? I can update the model and have the checkbox update no problem.

• javascript
• jquery
• angularjs

2 Answers 2

If you are using Angular, it's expected that you don't manipulate the DOM this way. You have to change the angular model variable, and let Angular make the DOM changes.

Study the ToDo List example at angularjs

Tip: I think you really don't need jQuery anymore!

The Angular code you need:

$scope.model.property = false;

Your use of jQuery is breaking anglers binding to the DOM. If you need to uncheck something change the value on the model that is bound to the checkbox:

$scope.model = { isChecked: true };

bound to:

<input type="checkbox" ng-model="model.isChecked">

to "uncheck":

$scope.model.isChecked = false;

No need for jQuery.