[AngularJS] Directive for e-mail input won't validate email address

[BA Angular]

Hi,

I am trying to create a directive for an e-mail input. Everything seems 
okay except for the validation of the email address format. When I output 
to console the ngModel also doesn't seem to get updated. When I inspect 
with ng-controller the model values do get updated but not within the 
controller.

The code of the directive html

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="email" name="{{name}}" 
id="reg-{{name}}" ng-model="model" ng-blur="setBlur()" />
    <label class="mdl-textfield__label" 
ng-class="{'ba-textfield__label-error':showErrorPanel()}" 
for="reg-{{name}}">{{label}}</label>
    <div ng-show="showErrorPanel()">
        <span class="ba-textfield__error" 
ng-show="errorRequired()">{{requiredMessage}}</span>
        <span class="ba-textfield__error" 
ng-show="errorEmail()">{{formatMessage}}</span>
    </div>
</div>

The code of the email field directive

.directive("emailInput", [function () {
        return {
            restrict: "E",
            replace: true,
            templateUrl: "email-field.html",
            require: 'ngModel',
            scope: {
                model: '=ngModel',
                name: '@name',
                label: '@label',
                required: '@required',
                requiredMessage: '@requiredMessage',
                formatMessage: '@formatMessage'
            },
            link: function (scope, element, attrs, ngModel) {

                //set default values
                if (scope.requiredMessage) { scope.requiredMessage = 
'Required'; }
                if (scope.formatMessage) { scope.formatMessage = 'Not 
valid'; }

                //get input element
                element.children()[0].required = 
scope.required.toLowerCase() == "true";

                //register element with MDL
                componentHandler.upgradeElement(element[0]);

                scope.showErrorPanel = function () {
                    return ngModel.$submitted || ngModel.$touched;
                };
                scope.errorRequired = function () {
                    return ngModel.$error.required;
                };
                scope.errorEmail = function () {
                    return ngModel.$error.email;
                };
                scope.setBlur = function () {
                    ngModel.$setTouched();
                };

            }
        }
    }])

Please help!!!! I have been stuck on this issue for two days now, can't 
figure out what I am doing wrong.

Thanks!

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.