JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="testApp" ng-controller="Ctrl">
    Range: <input type="range" ng-model="i" min="0" max="5" step="1" to-number /><br />
    Text: <input type="text" ng-model="i" min="0" max="5" to-number /><br />
    Select: <select ng-model="i" to-number>
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select><br />
    Number: <input type="number" ng-model="i" min="0" max="5" /><br />
    <br />
    i: {{i}}
</div>

JavaScript

function Ctrl($scope) {
    $scope.i=4;
    //$scope.$watch('i', function() {
    //    $scope.i = parseInt($scope.i);
    //});
}

angular.module('testApp', [])
    .directive('toNumber', function () {
        return {
            require: 'ngModel',
            link: function (scope, elem, attrs, ctrl) {
                ctrl.$parsers.push(function (value) {
                    return parseFloat(value || '');
                });
            }
        };
    });