使用RANGE Slider后，AngularJS $范围不会更新

Question

情况是，当我首先点击按钮时，范围更新。

但是当我使用滑块时，按钮将不再更新范围/用户界面。

这是代码

控制器

$scope.restaurantsInRadius = function(radius) {
    $scope.radius=parseInt(radius);
    radius = parseInt(radius);
    var markers_in_area = [];

    circle.setRadius(radius);
    removeMarkers();
    for (i = 0; i < gmarkers.length; i++) {
        if ( google.maps.geometry.spherical.computeDistanceBetween(usersLatLng, gmarkers[i].position) < radius ) {
            gmarkers[i].setMap($scope.map);
        }
    }
}

查看

<ion-view view-title="Map" ng-controller="MapCtrl">
<ion-content class="padding">
    <div style="height: 100%">

        <div id="map" data-tap-disabled="true"></div>

        <div style=" text-align: left ">   
            <br/>
            <button class="button button-assertive button-small" ng-click="showAllMarkers()">All</button>
            <button class="button button-assertive button-small" ng-click="restaurantsInRadius(100)">100m</button>
            <button class="button button-assertive button-small" ng-click="restaurantsInRadius(1000)">1km</button>
            <button class="button button-assertive button-small" ng-click="restaurantsInRadius(3000)">3km</button> 

            <span>Distance: {{radius}} meters</span>
            <div class="range" style="height: 100%">
              <i class="icon ion-minus-round"></i>
              <input type="range" name="radius" value="100"
                     min="100" max="3000" ng-model="radius" step="50"
                     ng-change="restaurantsInRadius(radius)" />
              <i class="icon ion-plus-round"></i>
            </div>
        </div>

    </div>
</ion-content>

我通过按住ng键单击按钮来调用restaurantsInRadius（），并为滑块添加ng-change。