How to customize a angular number input validation - angularjs

Question

I am using a directive that validates number input boxes. I would like to change it to fit my needs. right now it allows me to enter numbers or text and throws the error message on button click. It also triggers the function. I would like it to instantly throw the error message when text is entered and I also would like to have the button disabled until both inputs are valid.
Sum it up, I need the error message triggered immediately on any text entered. and the button needs to be disabled until both fields are valid
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<label for="inputEmail3" class="control-label">Price</label>
<input class="form-control input-sm" to-number id="Price" type="number" ng-model="customSubjectProperty.price" ng-pattern=" /^\d+$/" placeholder="Price">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label">Sqft</label>
<input class="form-control input-sm" to-number id="Sqft" type="number" ng-model="customSubjectProperty.sqft" ng-keypress="chartController.newInputKeyPress()" ng-pattern="/^\d+$/" placeholder="Sqft">
</div>
</div>
<div class="form-group">
<div class="col-md-12" style="margin-top:12px">
<button class="btn btn-primary btn-block btn-sm" ng-click="chartController.addSubjectPoint(customSubjectProperty)" ng-enter="chartController.addSubjectPoint(customSubjectProperty)">Add Point</button>
</div>
</div>
</form>
app.directive('toNumber', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
ctrl.$parsers.push(function (value) {
return parseFloat(value || '');
});
}
};
});

Answer 1

app.directive('toNumber', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
ctrl.$parsers.push(function (value) {
$(elem).on('keyup',callback),
return parseFloat(value || '');
$scope.apply()
});
}
};