Ng-change does not start from the checkbox inside the label

Question

I have HTML like this:

<input ng-controller="cboxCtrl" type="checkbox" 
       ng-model="hideCompleted" ng-change="hideChanged()"/>

and such a controller:

angular.module('simple-todos').controller('cboxCtrl', ['$scope',  
function ($scope) {
    console.log("starting");

    $scope.hideChanged = function () {
        console.log("in hideChanged() ");
    };
}]); // end controller

It works fine and I see a message on the console when I click this checkbox. However, if I add a label around the check box:

<label>
    <input ng-controller="cboxCtrl" type="checkbox" 
           ng-model="hideCompleted" ng-change="hideChanged()"/>
    Some text to explain the checkbox
</label>

The ng-change function does not start when I check the box. I expect this to be related to the definition of the field of view, but I cannot understand that. If I replace the labels with a div (which, of course, does not give a "nice" laýout), the ng-change function executes again as expected.

Answer 1

I just created jsfiddle with your code and it works for me.

https://jsfiddle.net/jfplataroti/hphb8c4v/5/

angular.module('simple-todos', []).controller('cboxCtrl', ['$scope', cboxCtrl]);


function cboxCtrl($scope) {
  console.log("starting");

  $scope.hideChanged = function() {
    console.log("in hideChanged() ");
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="simple-todos">
  <label>
    <input ng-controller="cboxCtrl" type="checkbox" ng-model="hideCompleted" ng-change="hideChanged()" />some text for the label
  </label>
</div>

Run codeHide result

Could you share your full code?

Answer 2

ng-change, / / . .

Answer 3

Please check the browser where you are trying to run this code. Also check it on other installed browsers. AngularJS no longer supports IE8 or earlier. link here: https://docs.angularjs.org/guide/ie

Answer 4

You need to move your ng-change to the checkbox on the surrounding ng-click shortcut

<label ng-click="hideChanged()">
    <input ng-controller="cboxCtrl" type="checkbox" ng-model="hideCompleted" />
    Some text to explain the checkbox
</label>