AngularJS 1.3 confirm password when new password is invalid - angularjs

Question

When writing a directive to verify that a "confirm password" input field matches a "new password" input field you can either pass in the model that stores the new password or the entire input. However both have a critical shortcoming. See below:
Passing in Model Approach
<form name="vm.passwordForm">
<input type="password" ng-model="vm.password.new" name="newPassword" required ng-minlength="6"/>
<input type="password" ng-model="vm.password.confirm" name="confirmPassword" required password-confirm="vm.password.new"/>
</form>
angular.module('passwordConfirm, [])
.directive('passwordConfirm', function () {
function link($scope, $element, $attrs, $ctrl) {
$ctrl.$validators.confirm = function confirm(modelValue, viewValue) {
var value = modelValue || viewValue;
if (typeof value === 'undefined' || value.length === 0) {
return true;
}
// $scope.passwordConfirm won't be set if that input is invalid
return value == $scope.passwordConfirm;
};
$scope.$watch("passwordConfirm", function () {
$ctrl.$validate();
});
}
return {
require: 'ngModel',
scope: {
passwordConfirm: "="
},
link: link
};
});
The problem with the above approach occurs when the new password field fails its own validation. Say, for example, that the user enters in "abc" as a new password. This is less than 6 characters so it would fail the ng-minlength validation which would, in turn, prevent the vm.password.new model from being set to "abc". If the user then entered in "abc" into the confirm password field, he would get an error telling him that the passwords don't match even though they do.
Pass in Input Approach
<form name="vm.passwordForm">
<input type="password" ng-model="vm.password.new" name="newPassword" required ng-minlength="6"/>
<input type="password" ng-model="vm.password.confirm" name="confirmPassword" required password-confirm="vm.passwordForm.newPassword"/>
</form>
angular.module('passwordConfirm, [])
.directive('passwordConfirm', function () {
function link($scope, $element, $attrs, $ctrl) {
$ctrl.$validators.confirm = function confirm(modelValue, viewValue) {
var value = modelValue || viewValue;
if (typeof value === 'undefined' || value.length === 0) {
return true;
}
return value == $scope.passwordConfirm.$viewValue;
};
// This doesn't work
$scope.$watch("passwordConfirm", function () {
$ctrl.$validate();
});
}
return {
require: 'ngModel',
scope: {
passwordConfirm: "="
},
link: link
};
});
This approach exposes the $viewValue property of the input field which doesn't have to go through validation. The confirm password field doesn't throw an error if the original password was invalid. It just cares about whether the two fields match. The problem, though, is that the $scope.$watch command doesn't work. I'm not sure why but it only fires once on page load and doesn't fire when the field is updated.
Any ideas which approach is better and how to get around each shortcoming?
UPDATE: I've discovered that setting ng-model-options="{allowInvalid: true}" on the new password field will update the model even when the password fails its validation, allowing the confirm password field to match it. I'm not sure this is the best approach, however, and I'm still curious as to why the $scope.$watch on the input field doesn't work.