ng:validator - ngModel.$setValidity

AngularJS form validator and TwitterBootstrap 3.0

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app="formValidator">
    <form action="" name="formToBeValidate">
        <div class="form-group" ng-class="{'has-error': formToBeValidate.elementName.$error.odd, 'has-success': !formToBeValidate.elementName.$error.odd}">
            <label class="control-label" for="formElement">Field should be filled with odd number</label>
            <input class="form-control" name="elementName" type="text" odd="" ng-model="elementName" />
        </div>
    </form>
</div>

CSS

.form-group .ng-valid {
    border-color: #3c763d;
}
.form-group .ng-invalid {
    border-color: #a94442;
}

JavaScript

angular.module('formValidator', [])
    .directive('odd', function () {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {
            scope.$watch(attrs.ngModel, function (viewValue) {
                var i = parseInt(viewValue);
                if (i % 2 !== 0) {
                    ngModel.$setValidity('odd', true);
                } else {
                    ngModel.$setValidity('odd', false);
                }
            });
        }
    };
});