Input field validation for two numbers - html

Question

I seem to be stuck with a validation issue for 2 numbers which I am passing in the input field. I provide 2 numbers in the input, say num1 and num2. num2 must be greater than num1. If it is not, then I need to show an error message. This is what I have tried so far. I am not seeing the error message being shown consistently. Appreciate it if someone could point out what I might be missing.
JSFiddle
<input name="num1" type="text" ng-model="num1" placeholder="num1">
<input name="num2" type="text" ng-model="num2" placeholder="num2">
<span ng-show="num1>num2">Num2 cannot be lesser than num1</span>

Answer 1

Your Fiddle seems to work, except maybe that the message is showing also when num2 is empty. Changing type="text" to "type="number" makes it behave more like you would expect.

Answer 2

You have can use several ways
The first one is to change the input type to number
var app = angular.module("Demo", []);
app.controller("AppController", function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="Demo">
<div ng-controller="AppController">
<div ng-form="regForm">
<input name="num1" type="number" ng-model="num1" placeholder="num1">
<input name="num2" type="number" ng-model="num2" placeholder="num2">
<span ng-show="num1>num2">Num2 cannot be lesser than num1</span>
</div>
</div>
</div>
Another is to use the input as text and associate a controller function to ng-show so that it compares the integer and not the string values
var app = angular.module("Demo", []);
app.controller("AppController", function($scope) {
$scope.checkNum = function(){
return parseInt($scope.num1) > parseInt($scope.num2)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="Demo">
<div ng-controller="AppController">
<div ng-form="regForm">
<input name="num1" type="text" ng-model="num1" placeholder="num1">
<input name="num2" type="text" ng-model="num2" placeholder="num2">
<span ng-show="checkNum()">Num2 cannot be lesser than num1</span>
</div>
</div>
</div>

Answer 3

Change the text box type="text" to type="number"
<input name="num1" type="number" ng-model="num1" placeholder="num1">
<input name="num2" type="number" ng-model="num2" placeholder="num2">
<span ng-show="num1 > num2">Num2 cannot be lesser than num1</span>
Demo