JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&lt;link href=&quot;//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css&quot; rel=&quot;stylesheet&quot;&gt;"></script>
<div ng-app="test">
		<div ng-controller="NumberCtrl">

			<form name="numberForm">
				<input name="amount" type="text" ng-model="amount" required  valid-number />
			</form>
        
            <span ng-show="numberForm.amount.$error.validNumber">Doesn't look like an integer</span>
           
            
		</div>
	</div>

CSS

input.ng-invalid {
		background-color: #FA787E;
	}

JavaScript

angular.module('test',[]).directive('validNumber',function(){
				return{
					require: "ngModel",
					link: function(scope, elm, attrs, ctrl){
						
						var regex=/\d/;
                        var verificationFunction = function(viewValue){
							var floatValue = parseFloat(viewValue);
							
                            if(regex.test(viewValue)){
								ctrl.$setValidity('validNumber',true);
                                return viewValue;
							}
                            else{
							    ctrl.$setValidity('validNumber',false);
                                return undefined;
                            }
						};
						ctrl.$parsers.unshift(verificationFunction);
                        verificationFunction();
					}
				};
			});
  
	function NumberCtrl($scope)  {
        $scope.amount = "not a number";
    }