Angular dynamically generated form validation - angularjs

Question

I am slowly advancing into angular. At this point I have form with several steps, each step is made of ng-form, since each step contains "continue" button and common headers I have following loop
<section ng-from="form12.{{step.id}}" ng-repeat="step in steps" id="{{step.id}}" ng-class="{active: currentSection == $index}">
<h1 class="header">{{$index + 1}}. {{step.title}}</h1>
<div class="content">
<ng-include src="step.template"></ng-include>
</div>
<!--and button code-->
<div class="content-body" ng-show="currentSection == $index">
<button ng-show="$index != 0" class="btn prev" ng-click="prevSection()">Previous</button>
<button class="btn next" ng-click="nextSection()" ng-disabled="step{{$index+1}}.$invalid">{{isLastStep($index)}}</button>
<div style="clear: both;"> </div>
</div>
</section>
So in that way I am not repeating same buttons code for each ng-form.
Before that I was using only ng-include and sections were hard coded, I suppose I am missing $scope now, as ng-include creates one as well as ng-repeat, could someone advise me on how can I make Continue button dependant on each ng-form validation result? (How can I access each individual ng-form results in topmost $scope?)

Answer 1

Each button has access to that form's $error, so you could have this for example:
<button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid">
You also have ng-form spelled incorrectly (ng-from), although I assume that was an artifact from you pasting/typing in.

Answer 2

If you want to disable button if one of the forms is invalid
How can I access each individual ng-form results in topmost $scope?
You can wrap ng-repeat in ng-form and top ng-form will be invalid if any child form in ng-repeat is invalid.
Or if you wan't to block button per form then
<button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid">{{isLastStep($index)}}</button>