Weird behavior with directives and angular form validation - angularjs

Question

I'm trying to create a custom directive to help me creating bootstrap forms and dealing with form validation using angular.
I've come up so far with the following directive:
directive('formGroup', ['$compile',function ($compile) {
var linker = function (scope, element, attrs) {
var fieldName = attrs.formGroup;
var formName = attrs.form;
if (formName === undefined || formName === null) {
//find form name
formName = $(element).closest('form').attr('name');
if (formName === undefined || formName === null) {
console.error('Could not find form name for error ' + fieldName);
}
}
var showErrorOn = formName + '.' + fieldName + '.$invalid';
$(element).addClass('form-group');
$(element).attr('ng-class', '{ \'has-error\' : ' + showErrorOn + ' }');
$(element).removeAttr('form-group');
$compile(element)(scope);
}
return {
restrict: 'A',
link: linker
}}]);
To be used with the following HTML:
<form name="testForm" novalidate>
<div class="row">
<div class="col-md-6" form-group="email">
<label>Email</label>
<input type="email" class="form-control" name="email" ng-model="email" required />
</div>
</div>
</form>
The point of the directive is a couple of things:
Finding the form name so I don't have to type it again for every field.
Add the class "form-group".
Add the class "has-error" whenever the field is invalid.
Everything seems to work just fine until I type a valid e-mail address and add a dot to the end (making the input invalid). After I do that, the input automatically clears out but I can't understand why.
Here's a fiddle: http://jsfiddle.net/kgwocdyu/2/
To reproduce type: "a#email" then type "." and the input will go blank.