Angular.js ng-click events on labels are firing twice

Question

Given the following code using angular.js

Plunkr here: http://plnkr.co/edit/i4MAzs

HTML:

Answer 1

Take a look at this answer:

https://stackoverflow.com/a/17185362/3093703

Also, I've edited your plnkr to show the event target:

http://plnkr.co/edit/73aslwHnwVcTd2fxSJ0f?p=preview

Both the input and label elements are receiving the event.

To avoid this, you can check the tag name of the event target before performing any action.

Edit

As to why this is: the label is actually tied to the input element in a way the div's or other elements would not be. The input is called the label's labeled control.

When you trigger an action on a label, that action is also run on the labeled control:

For example, on platforms where clicking a checkbox label checks the checkbox, clicking the label in the following snippet could trigger the user agent to run synthetic click activation steps on the input element, as if the element itself had been triggered by the user