ng-click on firing on mobile or tablet devices

Question

On page load i have a controller that calls a service and then binds the returned data to some $scope.objects:

app.controller("MainController", function($scope, $http, serviceGetData) {

    serviceGetData.getData(function(data) {
        $scope.LoginCount = data.LoginCount;
        $scope.ProductInfo = data.ProductInfo;
        $scope.ProfileInfo = data.ProfileInfo;

        // Delayed binding
        $scope.OrderHistory  = { History: [] };
    }

    $scope.populateModel = function(model, values) {
        var isArray = $.isArray(values);

        $.each(values, function(key, value) {

            if (isArray) {
                key = this.key;
               value = this.value;
            }

            if (model[key] !== value) {
                model[key] = value;
            }

        });
    };
}

And in my HTML, i try to bind $scope.OrderHistory by:

<h1><a href="#" ng-click="populateModel(OrderHistory  , { History: OrderEntries })" >View order details</a></h1>

This is fine when viewing on laptops/desktops, but not working in tablet and mobile devices e.g. iphone/ipad

Answer 1

Try to add the ngTouch. From documentation:

A more powerful replacement for the default ngClick designed to be used on touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-release before sending the click event. This version handles them immediately, and then prevents the following click event from propagating.

Requires the ngTouch module to be installed.