AngularJS: Required attribute working for some fields but not others?

Question

So I have a form with nested forms within. When I click submit, and if there are any required fields that are not filled, I want the boxes to highlight and for there to be an alert displayed.

What I have now works for all the fields within the Company Information field - the alert displays properly, the fields are highlighted, and the form does not get submitted. However, this does not work for the fields within Product Information. Even if there are unfilled required forms, the form continues to get submitted, and there is no invalid highlight.

I did notice, however, that if I had invalid fields in Company Information and invalid fields in Product information, all fields have invalid highlights and it does not proceed to submit. However the case where only Product Information has invalid fields does not work. Also, if I remove ng-class="{failedSubmit:model.failedSubmit}" from the product form attribute, then even in the case where both Company and Product have invalid fields, invalid Product fields do not highlight at all - so I'm puzzled as to why totalForm does not cover all the forms its wrapping.

Anyone have any insight? Thanks!

So here is my 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>

And here is my CSS class:

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

And here is the relevant javascript code - this is fired upon pressing a submit button:

             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;
                }

Answer 1

I'm answering without testing it so let me know if you need example... first, my recommendation is to use one form, with different divs that you can toggle with ng-show. is there a special reason you want nested forms? second, labels don't need to have the required field and you also wrote twice few lines with the col-md-12. third, where are you submitting your form? I didn't see it in your code. let me know if you solved it.