javascript - AngularJS slider number binding not working -

i relatively new angularjs, , having trouble getting slider , number element work correctly. when change number value, updates slider. however, when change slider value number becomes invalid.

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> 

controller

angular.module("app").controller("radiuscontroller", ["$scope","radiusservice",     function ($scope, radiusservice) {         $scope.radius = radiusservice.getradius();          $scope.radiuschanged = function(radius){             radiusservice.setradius(+radius);         }     }]); 

service

angular.module("app").factory("radiusservice", function() {     var radius = 10;      return {         setradius: function(newradius){             console.log(typeof newradius);             radius = newradius;         },          getradius: function(){             return radius;         }     } }); 

i have checked type number when setting new radius, is. when ever use slider number element becomes invalid.

on live site, when ever number changed has following class:

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

but when slider used has class:

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

the value attribute of number same of slider, nothing displayed in box. if click increment/decrement start 0 regards of number value attribute.

why this?

fixed setting $scope.radius in controller:

controller

angular.module("app").controller("radiuscontroller", ["$scope","radiusservice",     function ($scope, radiusservice) {         $scope.radius = radiusservice.getradius();          $scope.radiuschanged = function(radius){             radius = +radius; //parse integer             $scope.radius = radius;             radiusservice.setradius(radius);         }     }]);