How can I check an ng-included form's validity from the parent scope

http://stackoverflow.com/questions/15818431/how-can-i-check-an-ng-included-forms-validity-from-the-parent-scope

by manikantag

HTML

<script type="text/ng-template" id="/form1.html">
    <div style="border: 1px solid red; padding: 5px;">
        <form name="subForm1">
            <input type="text" ng-model="someScopeObject.property" placeholder="Enter any value" ng-required="true" />
        </form>
    </div>
</script>

<script type="text/ng-template" id="/form2.html">
    <div style="border: 1px solid green; padding: 5px;">
        <form name="subForm2">
            <input type="text" ng-model="someScopeObject.otherProperty" placeholder="Enter any value" ng-required="true" />
        </form>
    </div>
</script>

<div style="border: 1px solid blue; padding: 5px;">
    <div ng-form="parentForm">
        <p>
            <div ng-include src="'/form1.html'"></div><br />
            <input type="button" value="Submit Button for Subform 1" ng-disabled="parentForm.subForm1.$invalid" />
        </p>
        
        <p>
            <div ng-include src="'/form2.html'"></div><br />
            <input type="button" value="Submit Button for Subform 2" ng-disabled="parentForm.subForm2.$invalid" />
        </p>
    </div>
</div>

<input type="button" value="Submit Button for Entire Form" ng-disabled="parentForm.$invalid" />

JavaScript

var myApp = angular.module('myApp', []);