title: How do I access FormController in parent controller or scope in AngularJS
body: <p>I have a page with multiple forms and I only want to show one at a time. For this I separated each form into a section and using Bootstrap's accordion plugin I only allow one open section at a time. </p>
  
  <p>My markup looks something like this:</p>
  
  <pre><code>&lt;a ng-click="open_section('section1')"&gt;Section 1&lt;/a&gt;
  
  &lt;div collapse="section1"&gt;
    &lt;form name="section1Form"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;a ng-click="open_section('section2')"&gt;Section 2&lt;/a&gt;
  
  &lt;div collapse="section2"&gt;
    &lt;form name="section2Form"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Everything work just fine, I can navigate between the forms etc.</p>
  
  <p>Because I don't want the user opening a section if the one they are currently editing contains validation errors, I tried checking in the <code>open_section</code> function if the form associated with it is valid or not. </p>
  
  <p>I tried, but I could not. I could not access the FormController associated with the forms in the controller that is responsible for the page. For some reason, they are not getting published on the scope.</p>
  
  <p>This is what I tried:</p>
  
  <ul>
  <li><p><code>$scope.section1Form</code> is <code>undefined</code></p></li>
  <li><p>tried with <code>$scope.$watch('section1Form, function(){})</code>, still undefined</p></li>
  <li><p>tried adding the name of the form as a second parameter to <code>open_section</code> like so: <code>open_section('section1', section1Form)</code> but in the function the second argument is <code>undefined</code>.</p></li>
  </ul>
  
  <p>Between the <code>&lt;form&gt;&lt;/form&gt;</code> tags, I have access to the FormController, but outside them I don't. Since the event is coming from outside the <code>&lt;form&gt;</code> (the closing, opening of the sections) I can't pass the FormController to my controller to check the validity of my forms.</p>
  
  <p>Is there a way to get around this, or should I refactor my page?</p>
  
  <p>I am using Angular 1.1.5 btw.</p>
  
  <p>Also, checking with the AngularJS Batarang Chrome plugin, I can see that the forms get published as child scopes to the current scope. </p>
  
  <p><strong>EDIT</strong>: this is how the scope hierarchy looks for this app</p>
  
  <pre><code> - root
   |
   ---current controller\'s scope
   |
   ----scope that contains the forms
  </code></pre>
  
  <p>Is this because I'm using <code>ng-include</code>? Is there no way to access those forms in a controller then?</p>