Пользовательская проверка html5 не работает с угловыми

Я использую следующую форму:

<form name="signupForm" id="register-form" ng-submit="addUser(user)" method="POST">
    <div class="row">
        <input type="email" ng-model="user.email" id="reg_email" class="form-control" placeholder="Email" required pattern="[^@s]+@[^@s]+.[^@s]+" minlength="5" maxlength="40" required>
        <input type="password" ng-model="user.password" id="reg_password" class="form-control" placeholder="Password" required='true' minlength="3" maxlength="10" required>
        <input type="submit" id="reg_submit" class="submit-input grad-btn ln-tr" value="Submit">
    </div>
</form>

Когда появляется ошибка в форме, я устанавливаю setCustomValidity()ввод.

auth.signup($scope.userData, successAuth, function (error) {
    $rootScope.error = error.error;
    console.log("error: " , $rootScope.error);

    if($rootScope.error == "user already exists"){
        var input = document.getElementById("reg_email");
        input.setCustomValidity("$rootScope.error");
    } else{
        var input = document.getElementById("reg_email");
        input.setCustomValidity("");
        angular.element('#register-modal').modal('hide');
        document.getElementById("register-form").reset();
    }
});

Ну, модальная форма не закрывается из-за, setCustomValidity()но я не могу установить сообщение об ошибке в поле ввода.

Обновить:

Фактически он показывает сообщение об ошибке при втором щелчке. Зачем?

Сообщения об ошибках активируются при втором щелчке, и даже когда форма действительна, отображается сообщение об ошибке.