Ng-click stops updating range after ng-change was used

ionic-v1
1

Hi everyone, looking for advise. I’m writing a simple app and I encountered a problem. I have a range element, and 2 clickable icons, like so:

<div class="item range">
        <i class="icon ion-minus" ng-click="testingMinus()"></i>
        <input id="rangeSlider" type="range" min="1" max="501" name="zoomLevel" ng-model="rangeSliderRadius" ng-change="updateCircleRadius(rangeSliderRadius)">
        <i class="icon ion-plus" ng-click="testingPlus()"></i>
</div>

in my controller, I have:

$scope.rangeSliderRadius = 250;
  circle = new google.maps.Circle({
  map: map,
  center: latLng,
  radius: $scope.rangeSliderRadius,
  editable: true
})
$scope.updateCircleRadius = function(val) {
            circle.setRadius(parseInt(val));
            $scope.rangeSliderRadius = parseInt(val);
        }
$scope.testingPlus = function() {
  if (parseInt($scope.rangeSliderRadius) <= 501) {
  var tempRadius = parseInt($scope.rangeSliderRadius) + 5;
  $scope.updateCircleRadius(tempRadius);
  }
}

When the template loads, things seem to work as expected - clicking on the plus icon updates visually the range element (meaning it moves the vertical “slider” on the horizontal line with each click), and updates the circle on the map at the same time. However, once I click directly on the range element (which also works - updates the position visually and the circle), the icon stops working correctly. Following clicks on the icon keep updating the circle on the map, but the range element doesn’t change any more. Refreshing the page returns things to the initial state. I clicked through this with breakpoints in chrome dev tools, looking up values, but didn’t find anything out of order.

Could someone please help - what could be the cause of such behaviour?