title: Angularjs - Dynamically change dom with directives or widgets?
body: <p>my goal is to understand how to use angularJS correctly. I want to be able to tie a selection of variable to dynamically changing the DOM structure using angularJS. I dont think I'm quite understanding the documentation that angular provides and I haven't found any examples here or otherwise. Any help is appreciated.</p>
  <p>The idea is that I have this use case where I first start with the selection of the type and from that type selected, the appropriate input type elements will be created and then recorded later with the ng-model (from textareas to checkboxes for example), all the while controlled by the angularjs controller for validation/restrictions. I'm used to the idea of having clone-able elements on the page and destroying and creating new with jQuery, but I've been reading that controllers should not have this logic and should instead be created with directives/widgets. I dont see any examples of directives or widgets being manipulated in this way however so I'm not even sure how to proceed. Can I use directives to manipulate the DOM in this way, not just once but multiple times based on a watched element?</p>
  <p>Example of what I would like to do.</p>
  <pre><code>$scope.types = ['Type1','Type2']
  
  // something along the lines of...
  $scope.layouts = {'Type1':['textarea','textarea'], 'Type2':['numeric','datepicker']}
  </code></pre>
  <p>Select Type 1:</p>
  <ul>
  <li>Show 2 text areas</li>
  </ul>
  <p>Select Type 2:</p>
  <ul>
  <li>Show a numeric input</li>
  <li>Show a date picker</li>
  </ul>