Given the following code using angular.js

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

HTML:

<form name=myForm ng-controller=Ctrl>

  Try clicking on the labels. <br/>

  <label>

    Value1: <input type=checkbox ng-checked='value1' ng-click='toggleValue1()'>

  </label> <br/>

  <label ng-click='toggleValue2()'>

    Value2: <input type=checkbox ng-checked=value2>

  </label> <br/>

  <tt>value1 = {{value1}}</tt><br/>

  <tt>value2 = {{value2}}</tt><br/>

  <tt>fire_count = {{fire_count}}</tt>

</form>

Javascript:

angular.module('App', []);



function Ctrl($scope) {

  $scope.value1 = true;

  $scope.value2 = 'YES'

  $scope.fire_count = 0;



  $scope.toggleValue1 = function(){

    $scope.value1 = !$scope.value1;

    $scope.fire_count++;

    console.log(Clicked!);

  }



  $scope.toggleValue2 = function(){

    $scope.value2 = !$scope.value2;

    $scope.fire_count++;

    console.log(Clicked!);

  }

}

The click event will fire twice when you click on the 'Value2' label. This only happens when ng-click is attached to the label. When it's attached to the input element everything works as expected.

Can someone explain what's going on?