Button touch event while sliding range only fires once

For an ionic framework app, I'd like to press a button while I'm sliding a range and am having trouble. While the range slider is moving or actively being touched, touching a button will fire the button's event only once. Further touches of the button appear to activate it (it depresses on screen), but it does not call the event function. The event handling is nothing fancy: the button uses on-touch for a function in my controller and the range input is bound using ng-model.

To reproduce:

  • slide the range input
  • while still holding and/or sliding the range input, touch the button. The buttonTouch() function is called on the the first button press. After that, buttonTouch() will not be called, and the button will appear as if it is being activated with each touch on screen.

I don't know that this can be tested in a browser, as it requires touching both controls at the same time (I used the Ionic View app).

example:

html

<ion-content class="padding" ng-controller="RangeCtrl">
  <button type="button" class="button button-large" on-touch="buttonTouch()">
    <i class="icon ion-pinpoint"></i>
  </button>

  <div class="padding">
    <canvas width="100" height="100" style="background: {{flipColor}};">
    </canvas>
  </div>

  <div class="range range-positive">
    <input type="range" ng-model="level">
    <span class="padding-left">{{level}}</span>
  </div>
</ion-content>

controller

.controller('RangeCtrl', function($scope) {
  $scope.flip = false;
  $scope.flipColor = 'green'
  $scope.level = "50";

  $scope.buttonTouch = function() {
    $scope.flip = !$scope.flip;  

    $scope.flipColor = $scope.flip ? 'blue' : 'green';
  }
})