JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<!doctype html>
<html ng-app="HelloApp">
    
    <body>
        <div class="container" style="padding-top:50px">
            <input type="text" ng-model="slip.risk" class="form-control" placeholder="Risk" numbers-only />
        </div>
    </body>

</html>

JavaScript

angular.module('components', [])
    .directive('numbersOnly', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            ngModelCtrl.$parsers.push(function (inputValue) {
                var transformedInput = inputValue.replace(/\.\.+/g, '.');
                console.log(transformedInput);
                ngModelCtrl.$setViewValue(transformedInput);
                ngModelCtrl.$render();

                return inputValue;
            });
        }
    }
})

angular.module('HelloApp', ['components'])