title: how to enable ionic multi-touch events
body: <p>I 'm developing a simple ionic app, and part of the app requires you to press two buttons at once.  I've built this logic like so:</p>
  
  <pre><code>&lt;!--yT stands for yourThumb, pT stands for partnersThumb --&gt;
  
  
  &lt;a class="icon ion-qr-scanner lg-txt" on-hold="Global.thumbHoldManager('yT',true)" on-release="Global.thumbHoldManager('yT',false, true)"&gt;&lt;/a&gt;
  
  &lt;a class="icon ion-qr-scanner lg-txt" on-hold="Global.thumbHoldManager('pT',true)" on-release="Global.thumbHoldManager('pT',false, true)"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>I have a method on my controller which handles this event using a service I 've created</p>
  
  <pre><code>var globalCtrl = function (clickHandler, $timeout) {
    var self = this;
    this.clickHandler = clickHandler;
    this.timeout = $timeout;
    this.readyState = clickHandler.ready;
    this.showInstruction = false;
  
    clickHandler.watchForReady();
  
  };
  
  globalCtrl.prototype.thumbHoldManager = function(which, what, up) {
      this.clickHandler.setClickState(which, what);
      var self = this;
  
      if (up) {
          this.clickHandler.stopWatching();
      }
  
      if (!this.readyState) {
          this.instruction = "Hold both thumbs in place to scan"
          if (!this.showInstruction) {
                  this.showInstruction = true;
                  self.timeout(function() {
                  self.showInstruction = false;
              }, 5000)
          }
      }
  };
  
  globalCtrl.$inject = ['clickHandler', '$timeout'];
  </code></pre>
  
  <p>The service clickHandler exposes an api to a private object whose job it is to track when a button is pressed, and when both buttons are pressed to navigate to a new url.</p>
  
  <pre><code>.factory('clickHandler', [
      '$interval',
      '$rootScope',
      '$location',
      function($interval, $rootScope, $location) {
  
      // Service logic
      // ...
  
          var clickState = {
              yT: false,
              pT: false,
              ready: false,
              watching: false,
              watcher: false
          };
  
      // Public API here
  
          return {
              setClickState: function(which, what) {
                  clickState[which] = what;
              },
  
              getClickState: function(which) {
                  return clickState[which]
              },
  
              getReadyState: function() {
                  return ((clickState.yT) &amp;&amp; (clickState.pT));
              },
  
              watchForReady: function() {
                  var self = this;
                  clickState.watching = $interval(function() {
                      clickState.ready = self.getReadyState();
                  },50);
  
                  clickState.watcher = $rootScope.$watch(function() {
                      return clickState.ready
                  }, function redirect(newValue) {
                      if (newValue) {
                          self.stopWatching();
                          $location.path('/scan');
                      }
                  })
              },
  
              stopWatching: function() {
                  if (clickState.watching) {
                      $interval.cancel(clickState.watching);
                      clickState.watcher();
                      clickState.watching = false;
                      clickState.watcher = false;
  
                  }
              }
  
          };
      }
  ])
  </code></pre>
  
  <p>I don't get any errors with this code, everything works as it should, the watcher gets registered on the hold event and unregistered on the release event.  But no matter what I do, I cannot seem to get my phone to detect a press on both buttons.  It's always one or the other and I don't know why.    I can't test this in the browser or the emulator since multi-touch is not supported and I don't have a multi-touch trackpad if it were.</p>