Description

Currently in our application we have a checkbox with a ng-model binding and a click handler attached to it. We want our checkbox to be checked only if certain business logic is met. To prevent the checkbox from getting checked, we call the event.preventDefault() method inside of our click handler attached to our checkbox element. Though the preventDefault() prevents the checkbox from being checked, but in IE11 it can be observed that the ng-model binding is updated, i.e binded variable has default value set to false, the value now updates to true, but the checkbox state remains unchanged. Also, this can be observed only when we click on the checkbox for the first time, after that on clicking on the checkbox the value remains unchanged if we call preventDefault() method.

🔬 Minimal Reproduction

Here, is the plunker for the issue described above:

http://plnkr.co/edit/FP34eXyPVZu5G9wN?preview

Note

It was observed that before version- 1.7x , the above mentioned issue could be observed in all the browsers. But for angular.js 1.7+ it can only be seen in IE11. Here is the plunker using version 1.6.0:

http://plnkr.co/edit/oKDonlG8XnKEGn8k?preview

Also, on looking into the source code. It was found that currently for input checkboxes listen to the change event for model updates. Which can be seen here:

It works fine in Chrome/firefox as the change event in these browser is triggered after the click event. So in case we call preventDefault() method in our click event handler the checkbox state is not changed. However in case of IE11 the change event is triggered before the click event.