title: How can I make recursive templates in AngularJS when using nested objects?
body: <p>I'm trying to build a form dynamically from a JSON object, which contains nested groups of form elements:</p>
  
  <pre><code>  $scope.formData = [
    {label:'First Name', type:'text', required:'true'},
    {label:'Last Name', type:'text', required:'true'},
    {label:'Coffee Preference', type:'dropdown', options: ["HiTest", "Dunkin", "Decaf"]},
    {label: 'Address', type:'group', "Fields":[
        {label:'Street1', type:'text', required:'true'},
        {label:'Street2', type:'text', required:'true'},
        {label:'State', type:'dropdown',  options: ["California", "New York", "Florida"]}
      ]},
    ];
  </code></pre>
  
  <p>I've been using ng-switch blocks, but it becomes untenable with nested items, like in the Address object above. </p>
  
  <p>Here's the fiddle:
  <a href="http://jsfiddle.net/hairgamiMaster/dZ4Rg/">http://jsfiddle.net/hairgamiMaster/dZ4Rg/</a></p>
  
  <p>Any ideas on how to best approach this nested problem? Many thanks!</p>