Form validation inside accordion angularJS

Question

I have an accordion (angular-bootstrap) that has 3 groups. In the second group there's a form that validates well (required and email fields).

In the third group there is a summary, builded from the form-data. Or there must be an additional error-message when something is invalid on the form.

Because of the directive-structure each accordion-group has it's own isolated scope. How can I share the form.$valid (or other properties) between the different accordion-groups (or even outside the accordion).

This is my html (shortened):

<accordion close-others="true" id="checkoutsteps">
                <accordion-group is-open="menuStatus[0].isOpen">
                   [...]
                </accordion-group>
                <accordion-group is-open="menuStatus[1].isOpen">
                    <accordion-heading>
                        <div class="number">2</div>
                        {{bid.name}}
                    </accordion-heading>

                    <div class="step-content"> 
                       <form name="frmOffer">[...]</form>
                    </div>
                </accordion-group>
                <accordion-group is-open="menuStatus[1].isOpen">
                    <accordion-heading>
                        <div class="number">3</div>
                        Summary
                    </accordion-heading>

                    <div class="step-content"> 
                        <div ng-show="frmOffer.$valid"></div> <-- THIS DOES NOT WORK
                    </div>
                </accordion-group>

Answer 1

The solution is to define a new object in your controller something like

$scope.formObj={}

Then, name your form within that element:

name="formObj.frmOffer">

Of course, you'll have to use that object everywhere..

<div ng-show="formObj.frmOffer.$valid"></div>