Angular ng-click function not called on touchscreen devices

Question

I have a directive which contains an iScroll element, which is built with li from an ng-repeat:

<div class="my-film">
    <div class="filmstrip-container">
        <div class="scroll-wrapper">

            <ul class="film-container">

                    <li ng-repeat="film in films" 
                        ng-mouseover="onMouseOverItem($event)" 
                        ng-mouseleave="onMouseLeaveItem($event)"
                        ng-click="openFilm()"
                        class='film-slide'>

                     ...nested videos etc in here.

                    </li>

            </ul>

        </div>
    </div>
</div>

In the directive's link function I have the onClick function like this

scope.openFilm = function() {
    ...code to open the film and play
}

This is working totally as expected on desktop, but when on Touchscreen (testing on an iPad) the openFilm() function is never called, however, the element does get the ng-click-active class applied.

I do have other event listeners on the li elements, but removing these didn't make any difference. Could it be something to do with iScroll?

We're using Angular 1.3, and have ngTouch added.

Answer 1

Try installing <script src="angular-touch.js"> provide dependency while initializing your app angular.module('app', ['ngTouch']); Hope this will help you. pleasae refer this page link