Директива угловой проверки не работает должным образом

Я использую настраиваемую угловую директиву для проверки валидации. Код директивы приведен ниже.

angularFormsApp.directive('showErrors',['$timeout', function ($timeout) {

    return {
        restrict: 'A',
        require: '^form',
        link: function (scope, el, attrs, formCtrl) {

            // find the text box element, which has the 'name' attribute
            var inputEl = el[0].querySelector("[name]");

            // convert the native text box element to an angular element
            var inputNgEl = angular.element(inputEl);

            // get the name on the text box so we know the property to check
            // on the form controller
            var inputName = inputNgEl.attr('name');

            var helpText = angular.element(el[0].querySelector(".help-block"));

            // only apply the has-error class after the user leaves the text box
            inputNgEl.bind('blur', function () {
                el.toggleClass('has-error', formCtrl[inputName].$invalid);
                helpText.toggleClass('hide', formCtrl[inputName].$valid);
            });

            scope.$on('show-errors-event', function () {
                el.toggleClass('has-error', formCtrl[inputName].$invalid);
            });

            scope.$on('hide-errors-event', function () {
                $timeout(function () {
                    el.removeClass('has-error');
                }, 0, false);
            });


        }
    }

}]);

и Html, как показано ниже

<div class="container" id="login-form">
    <a href="index.html" class="login-logo"><img src="assets/img/logo-big.png"></a>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>Login Form</h2>
                </div>
                <div class="panel-body">

                    <form name="loginForm" class="form-horizontal" novalidate>
                        <div class="form-group mb-md" show-errors>
                            <div class="col-xs-12">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="ti ti-user"></i>
                                    </span>
                                    <input type="text" class="form-control" placeholder="Username" autocomplete="Off" ng-required="true" name="username" autofocus ng-model="loginUser.username">
                                </div>
                                <span class="help-block" ng-if="loginForm.username.$error.required">Username is required</span>
                            </div>
                        </div>
                        <div class="form-group mb-md" show-errors>
                            <div class="col-xs-12" >
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="ti ti-key"></i>
                                    </span>
                                    <input type="password" class="form-control" placeholder="Password"
                                           name="password"
                                           ng-model="loginUser.password" autocomplete="Off"
                                           ng-required="true">
                                </div>
                                <span class="help-block" ng-if="loginForm.password.$error.required">Password is required</span>
                            </div>
                        </div>
                        <div class="form-group mb-n">
                            <div class="col-xs-12">
                                <a href="extras-forgotpassword.html" class="pull-left">Forgot password?</a>
                                <div class="checkbox-inline icheck pull-right p-n">
                                    <label for="">
                                        <input type="checkbox"></input>
                                        Remember me
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="panel-footer">
                    <div class="clearfix">
                        <a href="extras-registration.html" class="btn btn-default pull-left">Register</a>
                        <a href="" class="btn btn-primary pull-right" ng-click="$event.preventDefault(); SubmitLoginForm()">Login</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

Код контроллера:

var loginController = function ($scope, $window, $routeParams, $uibModal, $location, $filter, $rootScope, DataService, SharedProperties) {

    $rootScope.bodylayout = 'focused-form animated-content';

    $scope.loginUser = {
        username: "",
        password:""
    }



    $scope.load = function () {

        //getAppointmentInfo();
    };

    $scope.SubmitLoginForm = function () {
        $scope.$broadcast('show-errors-event');

        if ($scope.loginForm.$invalid)
            return;
    }
}

angularFormsApp.controller("loginController", ["$scope", "$window", "$routeParams", "$uibModal", "$location", "$filter", "$rootScope", "DataService", "SharedProperties", loginController]);

Теперь, когда я открываю форму ниже диапазона проверки ввода, по умолчанию отображается валидация. Когда я нажимаю кнопку "Вход", то ее показывается красным цветом и работает нормально. проблема заключается в том, что она не должна отображаться по умолчанию при открытии страницы. См. изображение ниже