AngularJS: Обязательный атрибут работает для некоторых полей, но не для других?

Поэтому у меня есть форма с вложенными формами внутри. Когда я нажимаю кнопку "Отправить", и если есть какие-либо обязательные поля, которые не заполнены, я хочу, чтобы поля выделялись и отображалось предупреждение.

То, что у меня теперь работает для всех полей в поле Информация о компании - предупреждение отображается правильно, поля выделены, и форма не отправляется. Однако это не работает для полей в разделе "Информация о продукте". Даже если есть незаполненные обязательные формы, форма продолжает поступать, и нет недопустимой подсветки.

Однако я заметил, что если у меня были недопустимые поля в "Информация о компании" и недопустимые поля в "Информация о продукте", все поля имеют недопустимые блики и не будут отправляться. Однако случай, когда только информация о продукте имеет недопустимые поля, не работает. Кроме того, если я удалю ng-class="{failedSubmit:model.failedSubmit}" из атрибута формы продукта, то даже в случае, когда у Компании и продукта есть недопустимые поля, недопустимые поля продукта вообще не выделяются - m озадачен тем, почему totalForm не охватывает все формы своей упаковки.

У кого-нибудь есть понимание? Благодарю!

Итак, вот мой HTML:

    <form name="totalForm" ng-class="{failedSubmit:model.failedSubmit}">
            <div id="collapse3" class="row">
                <h1 class="no-margin">Company Information</h1>
                <form class="form-horizontal" role="form" name="company">
                    <div class="container">
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <label for="companyName-md" class="control-label required">Company Name</label>
                            </div>                                    
                                <input class="form-control" id="companyName-md" name="companyName"
                                       ng-show=type="text"
                                       ng-model="model.companyName"
                                       required/>
                            </div>
                            </div>
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <label for="companyDesc-md" class="control-label text-area-label required">Company
                                    Description</label>
                            </div>
                               <textarea class="form-control" id="companyDesc-md" name="companyDesc"
                                                      ng-model="model.companyDesc" rows="5" required> </textarea>
                            </div>
                            </div>
                        </div>
                </form>
            </div>

            <div id="collapse4" class="row email-pref">
                <h1 class="no-margin">Product Information</h1>
                <form class="form-horizontal" name="product" ng-class="{failedSubmit:model.failedSubmit}">
                    <div class="container">

                        <div class="col-md-12">
                        <div class="col-md-12">
                            <label for="productType-md" class="control-label text-area-label required">Product
                                Type</label>
                            </div>
                                <select class="form-control" id="productType-md" name="productType"
                                        ng-options="item for item in productTypeList" rows="3"
                                        ng-model="model.productType" required></select>
                        </div>
                        </div>
                        <div class="col-md-12">
                        <div class="col-md-12">
                            <label for="productDesc-md" class="control-label text-area-label required">Product
                                Description</label>
                            </div>
                                <textarea class="form-control" id="productDesc-md" name="productDesc"
                                          ng-model="model.productDesc" rows="5" required></textarea>
                        </div>
                    </div>
                    </div>
                </form>
            </div>
        </form>

И вот мой класс CSS:

    form.failedSubmit .ng-invalid
{
    border:1px solid #f00;
}

И вот соответствующий код javascript - это срабатывает при нажатии кнопки отправки:

             if (!$scope.totalForm.$valid || !$scope.product.$valid){
                    $scope.showAlerts.push($scope.alerts[0]);
                    window.scrollTo(0, 0);
                    $timeout(function(){
                        $scope.showAlerts.pop();
                    }, 3000);

                    $scope.model.failedSubmit=true;
                }