Javascript AngularJS滑块编号绑定不工作

我对AngularJS比较陌生，我很难让滑块和数字元素正常工作。当我更改数值时，它会更新滑块。但是，当我更改滑块值时，数字将无效

HTML

<div id="radius" ng-controller="RadiusController">
    <input type="range" ng-model="radius" ng-change="radiusChanged(radius)" ng-value="{{ radius }}" min="0" max="100" />
    <input type="number" ng-model="radius" ng-change="radiusChanged(radius)" ng-value="{{ radius | number }}" min="0" max="100" step="1" />
    Radius: <label>{{ radius }} km</label> 
</div>

服务

angular.module("app").factory("RadiusService", function() {
    var radius = 10;

    return {
        setRadius: function(newRadius){
            console.log(typeof newRadius);
            radius = newRadius;
        },

        getRadius: function(){
            return radius;
        }
    }
});

我在设置新半径时检查了类型是否为数字，它是。但当我使用滑块时，数字元素就无效了

在实时站点上，当号码发生更改时，其类别如下：

class="ng-pristine ng-valid ng-valid-number ng-valid-max ng-valid-min">

但使用滑块时，它具有以下类别：

class="ng-pristine ng-valid-max ng-valid-min ng-invalid ng-invalid-number">

数字的值属性将与滑块的值属性相同，但框中不显示任何内容。如果要单击以递增/递减，它将从数值属性的0开始

---

这是为什么？

通过在控制器中设置$scope.radius来修复它：

控制器

angular.module("app").controller("RadiusController",
["$scope","RadiusService",
    function ($scope, RadiusService) {
        $scope.radius = RadiusService.getRadius();

        $scope.radiusChanged = function(radius){
            RadiusService.setRadius(+radius);
        }
    }]);

angular.module("app").controller("RadiusController",
["$scope","RadiusService",
    function ($scope, RadiusService) {
        $scope.radius = RadiusService.getRadius();

        $scope.radiusChanged = function(radius){
            radius = +radius; //parse to integer
            $scope.radius = radius;
            RadiusService.setRadius(radius);
        }
    }]);