Как проверить правильность формы с помощью сообщений ng после нажатия кнопки «Отправить»?

создайте директиву для проверки валидации и отлично работайте, но даже после полного заполнения формы кнопка отправки не работает должным образом. note: кнопка отправки (следующий шаг) работала нормально, прежде чем добавить директиву, я использую угловые материалы, а ng-сообщения работают нормально, но только когда вы пытаетесь заполнить это обязательное поле, но если я не коснусь или не пропустил поле, показывая все сообщения об ошибках, поэтому я добавляю директиву validForm для проверки формы, когда следующий шаг (отправить) получает щелчок и после добавления директивы появляется сообщение об ошибке при нажатии следующей кнопки, но не приводит вас к следующей странице.
директивный код:

form.directive('validForm', function ($perse) {
return {
    compile: function compile(tElement, tAttrs, transclude) {
        return {
            post: function postLink(scope, element, iAttrs, controller) {
                var form = element.controller('form');
                form.$submitted = false;
                var fn = $parse(iAttrs.validForm);
                element.on('submit', function (event) {
                    scope.$apply(function () {
                        element.addClass('ng-submitted');
                        form.$submitted = true;
                        if (form.$valid) {
                            fn(scope, {
                                $event: event
                            });
                        }
                    });
                });
                scope.$watch(function () {
                    return form.$valid
                }, function (isValid) {
                    if (form.$submitted == false) return;
                    if (isValid) {
                        element.removeClass('has-error').addClass('has-success');
                    } else {
                        element.removeClass('has-success');
                        element.addClass('has-error');
                    }
                });
            }
        }
    }
}

});

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

form.controller('Step1Ctrl', function ($scope, $location, step1Cache) {
$scope.IsEmpty = true;
var fosterCatcher = [];
$scope.childern = step1Cache.getChildern();
$scope.addChild = function () {
    $scope.childern.push({

    });
};
$scope.removeChild = function (array, index) {
    if ($scope.childern.length > 1) {
        array.splice(index, 1);
    }
};
$scope.checkNextStep = function () {

    for (var index = 0; index < $scope.childern.length; index++) {
        if ($scope.childern[index].IsFoster === true) {
            fosterCatcher.push("true");
        }
    }
    if (fosterCatcher.length === $scope.childern.length) {
        $location.path('/step4'); //'step4'
    } else {
        $location.path('/step2'); // 'step2'
    }

};
step1Cache.setChildern($scope.childern);

 });

HTML:

 <md-content layout-padding>
    <div class="wrap">
        <form name="Form" valid-form="checkNextStep()" novalidate>

            <div layout-gt-sm="row" layout-align="center" class="page md-inline-form" data-ng-repeat="child in childern">

                <md-input-container class="md-block ele ">
                    <label>First Name</label>
                    <input required name="firstName" ng-model="child.firstName">
                    <div ng-messages="Form.firstName.$error">
                        <div ng-message="required">First Name is required.</div>
                    </div>
                </md-input-container>
                <md-input-container class="md-block ele" style="max-width:60px;">
                    <label>MI</label>
                    <input required name=" middleName " ng-model="child.middleName ">
                    <div ng-messages="Form.middleName.$error ">
                        <div ng-message="required">Middle Name is required.</div>
                    </div>
                </md-input-container>
                <md-input-container class="md-block ele">
                    <label>Last Name</label>
                    <input required name="lastName " ng-model="child.lastName ">
                    <div ng-messages="Form.lastName.$error ">
                        <div ng-message="required ">Last Name is required.</div>
                    </div>
                </md-input-container>

                <div class="cell ">
                    <label> <b>Student?</b></label>
                    <div style="margin-top:15px;">
                        <md-radio-group required ng-model="child.IsStudent">
                            <md-radio-button value="Yes">Yes</md-radio-button>
                            <md-radio-button value="No"> No </md-radio-button>
                        </md-radio-group>
                    </div>
                </div>
                <div class="cell ">
                    <label><b> Child situation?(check all that apply) </b></label>
                    <div>
                        <md-checkbox ng-required="child.IsHomeless === undefined || child.IsHomeless === false " ng-model="child.IsFoster">
                            Foster Child
                        </md-checkbox>
                        <md-checkbox ng-required="child.IsFoster === undefined || child.IsFoster === false " ng-model="child.IsHomeless">
                            Homeless, Migrant, Runaway
                        </md-checkbox>

                    </div>
                    <!--   <md-button class="md-fab md-accent" ng-click="goToStep2()" aria-label="edit">

    <md-icon md-svg-src="img/ic_mode_edit_white_36px.svg" style="width: 36px; height: 36px;">
    </md-icon>
  </md-button>-->
                </div>
                <div id='rem'>
                    <md-button class="md-raised md-primary remove animate-show" ng-if="childern.length !== 1" ng-click="removeChild(childern,$index)">
                        <md-tooltip md-direction="top">
                            Delete
                        </md-tooltip>
                        <md-icon md-svg-src="img/ic_delete_white_48px.svg"></md-icon>
                    </md-button>
                </div>
            </div>
            <div layout-gt-sm="row" layout-align="center">
                <md-button class="md-raised md-accent" ng-click="addChild()">Add Child </md-button>
                <md-button type="submit" class="md-raised md-primary">
                    Next Step
                </md-button>
            </div>
        </form>
    </div>
</md-content>