ng-click is not triggered inside a <label> (Angular1)

Question

Good afternoon,

In my project, I have a component that is shared by other different components. This component is called toggle-switch-input. This component serves to filter some values from a list, and each item has a slider that, after your click, there should be a slide effect. In your html (toggle-switch-input.html), I have the following code:

<label>
  <input
    type="checkbox"
    ng-click="vm.itemToggleSwitch(vm.choices.indexOf(choice))"
    ng-checked="!vm.isSelected(vm.choices.indexOf(choice))">
    
    <div class="slider round"></div>
</label>

And on your controller (toggle-switch-input.controller.js) I have its functions (isSelected and itemToggleSwitch). There are many pages that use this component without any problem, except for one of them. I’ve been making some prints on the console of browser and when I click on the element I want (in this case a button in format slide), it calls the function isSelected, but for some reason it cannot call the function of the ng-click (itemToggleSwitch). However, on the other pages this occurs without any kind of problem: It makes the slide by calling the isSelected and itemToggleSwitch functions.

Does anyone have any light? I’m around the code and I’m not seeing any possible solution. The strange thing is that this component can be shared perfectly by other components, except in one.

The two functions present in the toggle-switch-input.controller.js controller:

this.isSelected = (index) => {
  if(this.ngModel.$modelValue.indexOf(this.choices[index]) === -1){
    return false;
  } else{
    return true;
  }
};

this.itemToggleSwitch = function (index) {

    var newList = angular.copy(this.ngModel.$modelValue);

    var itemIndex = newList.indexOf(this.choices[index]);

    if(itemIndex === -1){
        newList.push(this.choices[index]);
    } else {
        newList.splice(itemIndex, 1);
    }

    this.ngModel.$setViewValue(newList);
}.bind(this);

Thank you very much and continue a good day!