ng-click and ng-touch mobile device

Question

I have a cordova mobile app written in AngularJS. Adding ng-touch in my application makes some html behaviour to not work properly. One example of this problem is the weird behaviour of a checkbox not marking check when it is wrapped in an HTML element attached with ng-click. This works perfectly on desktops/laptops, the problem appears on mobile devices.

Example:

This does not work in mobile devices:

  <div ng-click="alertSomething()">
    <input type="checkbox" ng-model="data" name="data" id="data" />
    <label for="data">This checkbox needs to be pressed a couple of times before it is marked as checked
    in any mobile device.</label>
  </div>

While this one works properly:

  <input type="checkbox" ng-model="anotherData" name="anotherData" id="anotherData" />
  <label for="anotherData">This checkbox responds correctly on mobile</label>

The weirdest part is that when the ng-touch module is removed, it works properly as expected. Please help me, I have been trying to solve this problem for a couple of hours now.

Try opening this plunker on mobile: http://plnkr.co/edit/6LPeJP9QO6NMSpNuQqtQ?p=preview

Answer 1

I have actually come across this problem before, what I did was to create another directive that simulates a click event to replace ngTouch's ng-click version for that specific problem.

FORKED PLUNKER

DIRECTIVE

.directive('basicClick', function($parse, $rootScope) {
  return {
    compile: function(elem, attr) {
      var fn = $parse(attr.basicClick);
      return function(scope, elem) {
        elem.on('click', function(e) {
          fn(scope, {$event: e});
          scope.$apply();
        });
      };
    }
  };
});

HTML

  <div basic-click="alertSomething()">
    <input type="checkbox" ng-model="data" name="data" id="data" />
    <label for="data">This checkbox needs to be pressed a couple of times before it is marked as checked
    in any mobile device.</label>
  </div>

Answer 2

The label tag should check the box as per normal but what you have done is added another click event on top of another. You're essentially clicking twice so it's acting properly but unchecking itself. Try placing your ng-click on the Label tag instead if you need to do something special otherwise it should work per normal.