title: How can I use Angular to output dynamic form fields?
body: <p>I want to render a form, based on a dynamic field configuration:</p>
  
  <pre><code>$scope.fields = [
      { title: 'Label 1', type: 'text', value: 'value1'},
      { title: 'Label 2', type: 'textarea', value: 'value2'}
  ];
  </code></pre>
  
  <p>This should output something that behaves like:</p>
  
  <pre><code>&lt;div&gt;
      &lt;label&gt;{{field.title}}&lt;br /&gt;
          &lt;input type="text" ng-model="field.value"/&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;{{field.title}}&lt;br /&gt;
          &lt;textarea ng-model="field.value" rows="5" cols="50"&gt;&lt;/textarea&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The simple implementation would be to use <code>if</code> statements to render the templates for each field type. However, as Angular doesn't support <code>if</code> statements, I'm lead to the direction of directives. My problem is understanding how the data binding works. The <a href="http://docs.angularjs.org/guide/directive" rel="noreferrer">documentation for directives</a> is a bit dense and theoretical.</p>
  
  <p>I've mocked up a bare bones example of what I try to do here: <a href="http://jsfiddle.net/gunnarlium/aj8G3/4/" rel="noreferrer">http://jsfiddle.net/gunnarlium/aj8G3/4/</a></p>
  
  <p>The problem is that the form fields aren't bound to the model, so the $scope.fields in submit() isn't updated. I suspect the content of my directive function is quite wrong ... :)</p>
  
  <p>Going forward, I need to also support other field types, like radio buttons, check boxes, selects, etc.</p>