JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  <input ng-model="variables.varA" class="numbers" minvalue="15" style="text-align:center" />
  <input ng-model="variables.varB" class="integers" symbol="°" style="text-align:center" />
  <br />
  <input ng-model="variables.varC" class="numbers" maxvalue="200" style="text-align:center" />
  <input ng-model="variables.varD" class="integers" symbol="$" style="text-align:center" />
  
  <br /><br /><br /><br />
  {{ variables | json }}
</div>

JavaScript

var myApp = angular.module('myApp',['ui.numeric']);

angular.module('ui.numeric', []).directive('numbers', function() {
    return {
        require: 'ngModel',
        restrict: 'EACM',
        link: function(scope, element, attrs, modelCtrl) {

            var prev = 0;
            var minVal = parseInt(attrs.minvalue), maxVal = parseInt(attrs.maxvalue);
            
            if ( attrs.minvalue === null || attrs.minvalue === undefined) {
                minVal = 0;
            }
            if ( attrs.maxvalue === null || attrs.maxvalue === undefined) {
                maxVal = 1000000;
            }
            
            scope.$watch(element, function() {
                prev = 3;
                setAndRender(modelCtrl, setFormatting(element.val(), "N", attrs.symbol));
            });

            element.bind('focus', function() {
                showAlert("Focus", 1);

                if (prev !== 2) {
                    prev = 1;
                    setAndRender(modelCtrl, element.val().replace(/[^0-9 . -]/g, ''));

                    if (element.val.replace(/[^0-9 . -]/g, '') === ".") {
                        setAndRender(modelCtrl, element.val().replace(/[^0-9 . -]/g, ''));
                    }
                }
            });

            modelCtrl.$parsers.push(function(inputValue) {
                showAlert("Parse", 1);

                if (prev !== 3) {
                    prev = 2;
                    var returnVal = checkVal(inputValue, modelCtrl, "N", true, minVal, maxVal);

                    if (String(returnVal) === ".") {
                        setAndRender(modelCtrl, "");
                        return "";
                    }
                    else {
                        return returnVal;
                    }
                }
            });

            element.bind('blur', function() {
                showAlert("Blur", 1);

                prev = 3;
                modelCtrl.$setViewValue(setFormatting(element.val(),...