Multiple email address dialog using angular 2 and angular-ui

Till Angular 3.0, we need an angular directive to validate multiple emails addresses so based on Angular 3.0 code we have

// Not needed in Angular 3.0
app.directive('multipleEmails', function () {
    var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

    function validateAll(ctrl, validatorName, value) {
        var validity = ctrl.$isEmpty(value) || value.split(',').every(
            function (email) {
                return EMAIL_REGEXP.test(email.trim());
            }
        );

        ctrl.$setValidity(validatorName, validity);
        return validity ? value : undefined;
    }

    return {
        restrict: 'A',
        require: 'ngModel',
        link: function postLink(scope, elem, attrs, modelCtrl) {
            function multipleEmailsValidator(value) {
                return validateAll(modelCtrl, 'multipleEmails', value);
            }

            modelCtrl.$formatters.push(multipleEmailsValidator);
            modelCtrl.$parsers.push(multipleEmailsValidator);
        }
    };
});

Using the Angular-UI Model command we can create a dialog

(function () {
    'use strict';

    angular.module('app').factory('emailReportDialog', ['$modal', modalDialog]);

    function modalDialog($modal, $templateCache) {
        var service = {
            emailDialog: emailDialog
        };

        return service;

        function emailDialog() {
            var modalOptions = {
                templateUrl: '/emailDialog.tpl.html',
                controller: ModalInstance,
                keyboard: true
            };

            return $modal.open(modalOptions).result;
        }
    }

    var ModalInstance = ['$scope', '$modalInstance',
        function ($scope, $modalInstance, options) {
            $scope.data = {
                emails: ""
            };
            $scope.ok = function () {
                var emails = $scope.data.emails.split(",");
                $modalInstance.close(emails);
            };
            $scope.cancel = function () { $modalInstance.dismiss('cancel'); };
        }];
})();

Finally we need the template html file

<form class="form-horizontal" name="emailForm" novalidate>
    <fieldset>
        <div class="modal-body">
            <div class="form-group"
                 ng-class="{'has-error':emailForm.emailInput.$invalid && emailForm.emailInput.$dirty}">
                <label class="col-md-2" data-control-label for="emailInput">Email address</label>
                <div class="col-md-8">
                    <input name="emailInput" class="form-control" placeholder="Email address (required)" ng-model="data.emails" data-multiple-emails required>
                    <span class="help-block has-error">
                        <span ng-show="emailForm.emailInput.$error.required">
                            Email address is required.
                        </span>
                        <span ng-show="emailForm.emailInput.$error.multipleEmails">
                            Email format is incorrect. Use , to seperate multiple email addresses.
                        </span>
                    </span>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary"
                    data-ng-click="ok()"
                    ng-disabled="emailForm.$invalid">
                Email
            </button>
            <button class="btn btn-info" data-ng-click="cancel()">Cancel</button>
        </div>
    </fieldset>
</form>

Now we can use it as

vm.emailClicked = function () {
    emailDialog.emailDialog().then(function (emails) {});
    });
}