Creating directive that manipulates the ngmodel value - angularjs

Question

I am trying to create a directive that does the following:
Has a default value when the input is empty.
Limits the input to a upper and lower bounds, when it exeeds these it is specifically set to the upper or lower it exceeded.
Here is my code using the link function:
app.directive('rangedInput', function ($parse) {
return {
scope: {
lower: "#",
upper: "#",
},
require: 'ngModel',
link:
function ($scope, element, attrs, ngModelCtrl) {
if (!ngModelCtrl) {
return;
}
element.bind('blur', function (event) {
event.preventDefault();
var value = parseInt(element.val());
var upper = parseInt($scope.upper);
var lower = parseInt($scope.lower);
if (value > upper) {
value = upper;
} else if (value < lower) {
value = lower;
}
$scope.$apply(function () {
ngModelCtrl.$setViewValue(value);
ngModelCtrl.$render();
});
});
}
};
});
And the usage:
<label>{{model.Amount}}</label>
<input type="text" upper="1500000" lower="50000" ranged-input ng-model="model.Amount" />
I also tried one using the compile function:
app.directive('rangedInput', function ($parse) {
return {
scope: {
lower: "#",
upper: "#",
},
require: 'ngModel',
compile: function () {
var getter, setter;
return function ($scope, element, attrs, ngModelCtrl) {
getter = $parse(attrs.ngModel);
setter = getter.assign;
if (!ngModelCtrl) {
return;
}
element.bind('blur', function (event) {
event.preventDefault();
var value = parseInt(element.val());
var upper = parseInt($scope.upper);
var lower = parseInt($scope.lower);
if (value > upper) {
value = upper;
}
else
if (value < lower) {
value = lower;
}
element[0].value = value;
$scope.$apply(function () {
setter($scope, value);
});
});
};
}
};
});
Neither work as desired, the problem that I am finding is that the value of ng-model="model.Amount" doesn't seem to get updated correctly?

Answer 1

Here is the fixed code. Check this out.
app.directive('rangedInput', function ($parse) {
return {
scope: {
lower: "#",
upper: "#",
},
require: 'ngModel',
link:
function ($scope, element, attrs, ngModel) {
if (!ngModel) {
return;
}
element.bind('blur', function (event) {
event.preventDefault();
var value = parseInt(element.val());
var upper = parseInt($scope.upper);
var lower = parseInt($scope.lower);
if (value > upper) {
value = upper;
} else if (value < lower) {
value = lower;
}
$scope.$apply(function () {
ngModel.$setViewValue(value);
ngModel.$render();
});
});
}
};
});