title: Complex angular app with an arbitrary number of dynamic input forms + controllers for each?
body: <p>I've hit a wall here, and I'm sure I have all the pieces, it's just a matter of linking them all together to form a functional component. </p>
  
  <p>Basically, I'm trying to create a dynamic input form. The form has a drop down menu in its initial state, which depending on the selection, adds a different set of inputs (which then have other drop downs, which add other functionality). I've gotten this form to function fully, but because of the complexity of this project, I need to restructure this input form concept even more. I'd like for this to be possible, but I'm not too sure it can be done:</p>
  
  <ul>
  <li>dynamic input form, is created / removed from DOM (not hidden via CSS)</li>
  <li>An arbitrary number of these forms</li>
  <li>Each form has a controller</li>
  </ul>
  
  <p>because of the drop down menu configuration, if I simply hide the element it still retains the values from the previous use. Plus, this doesn't support an arbitrary number of these forms, and there are performance issues with having these large elements loaded into the DOM tree. So, as it is now I'm using JQuery to create a container with a unique ID, and then use .load to insert the HTML page into the container. Works great, but the close button doesn't work because the controller associated with the input isn't being compiled.</p>
  
  <p>So, I looked into using directives and the $compile service. Then I figured I could look into components. I've done a ton of researching and haven't quite been able to figure out if my specific idea can be done. I know that directives can be inserted dynamically and compiled to have access to a controller. I'm just not sure how to go about doing this. More specifically:</p>
  
  <p>How do I use the $compile service to compile a dynamic, external HTML document with it's own controller into an existing DOM tree? </p>
  
  <p>A simple version would be: Click a button on a page that is already loaded => load the external HTML document and compile with controller => click button <em>inside</em> the new HTML document which removes the element from the tree and ends the controller instance. </p>