JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller="MainController">
        <h1>Touch only!</h1>
        <h2>you can use chrome emulation to simulate this</h2>
        <p>If joystick is dragged you cannot interact with the button. How to get the interaction on the button when the joystick is dragged?</p>
        <p>{{pos.x}}, {{pos.y}}</p>
        <joystick position="pos"></joystick>
        <button ng-click="count()">Counter: {{ counter }}</button>
    </div>
</div>

JavaScript

window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame   ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
                window.setTimeout(callback, 1000 / 60);
            };
    })();

angular.module('myApp', []);

angular.module('myApp').controller('MainController', function($scope) {
    $scope.pos = {
        x : 0,
        y : 0
    };
    
    $scope.counter = 0;
    
    $scope.count = function() {
        $scope.counter += 1;
    };
        
});

// https://github.com/sebleedelisle/JSTouchController/blob/master/TouchControl.html
'use strict';
angular.module('myApp').directive('joystick', function() {

    function joystickController ($scope) {

    }

    return {
        restrict : 'E',
        controller : ['$scope', function ($scope) {
            return joystickController($scope);
        }],
        scope : {
            // Using primitives here did not work, so we use an Object, see: http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs
            position : '='
        },
        template : '<canvas class="joystickCanvas"></canvas>',
        link : function(scope, element) {

            var joystickHeight = 200;
            var joystickWidth  = 200;

            var center = {
                x : joystickHeight / 2,
                y : joystickWidth / 2
            };

            var radiusCircle = 35;
            var radiusBound = 50;

            // Canvas and context element
            var container = element[0];
            var canvas = container.children[0];
            var ctx = canvas.getContext('2d');

            // Id of the touch on the cursor
            var cursorTouchId = -1;
            var cursorTouch = {
                x : center.x,
                y : center.y
            };

            function resetCanvas() {
                canvas.height...