Angular.js : checkbox is not checked by the user but I need ng-change

Question

I have a custom jquery-plugin that will hide the real checkbox and show an enhanced component instead of the real one.

for this code

<label for="local">
  <input type="checkbox" ng-model="value" ng-change="filterByCoursePlace('test')"  name="local"  id="local"><span>Local</span>
</label>

The plug-in generates this code ( it adds a div with on top of the checkbox )

<label for="local">
  <div class="jcf-class-ng-pristine jcf-class-ng-valid chk-area chk-unchecked chk-focus"><span></span></div>
  <input type="checkbox" ng-model="value" ng-click="filterByCoursePlace('test')" name="local" id="local" class="ng-pristine ng-valid"><span>Local </span>
</label>

the big square is the fake one ( shown to the user ) and the small square is the real one. the real checkbox will be hidden to the user.

The problem is: when I click on the real one ng-change works But when I click on the fake one ng-change does not work although the real one gets checked too.

Answer 1

I ended up showing the real checkbox on top of the fake one and make it invisible with css( opacity = 0)

That's not the perfect solution but it worked.

Answer 2

How much can you change the jQuery plugin? The generated code has an ng-click="filterByCoursePlace('test'), that's why if you click on the real one works. The quickest way to do what you want is to remove every ng-change/ng-click add in your controller a watch:

$scope.$watch('value', function(newVal, oldVal) {
    filterByCoursePlace('test')
});

Or if you can change how the plugin generates the code you could add the ng-click to the fake checkbox instead of the real one. Anyway, if you want to trigger filterByCoursePlace also when value is changed by another function (like a 'resetFilters' button), I would go with the $scope.$watch way.