title: Binding data on a model for dynamic nested forms in angularjs
body: <p>I'm generating nested form from a json object say formObject and binding the values in the json object itself. I'm parsing the values recursively and pulling out the actual data say dataObject at submit. </p>
  
  <p>I can retrieve the dataObject in a linear form like this one. <a href="http://jsfiddle.net/DrQ77/80/" rel="nofollow">http://jsfiddle.net/DrQ77/80/</a>.</p>
  
  <pre><code>&lt;select ng-model="Answers[question.Name]" ng-options="option for option in question.Options"&gt;
  </code></pre>
  
  <p>In contrast to the above, <a href="http://jsfiddle.net/DrQ77/92/" rel="nofollow">http://jsfiddle.net/DrQ77/92/</a> has some recursion. I've renamed <code>question</code> to <code>element</code> for it to represent both questions &amp; sections. Every section can have multiple questions &amp; again, multiple sections (this is what I meant by nesting). What I want eventually is an object in a form below with any level of nesting.</p>
  
  <pre><code>Answers=[{
      section:"Personal",
      values:[{GenderQuestion:"Male"},{MaritalStatus:"Married"},{section:"Sub Personal",values:[{LivingWith:"Alone"}]}]
  }, {
      section:"Random",
      values:[{ColorQuestion:"Red"}],
  },
  {SectionLess:"opt1"}]
  </code></pre>
  
  <p>This is one solution &amp; I can get it on submit, $scope.Answers from the first fiddle does not (I think) allow that kind of nesting. But when I have to update an existing dataObject, I felt a need to map the dataObjects onto the formObject before rendering it, and then parsing again on submit. 
  Now this isn't MVC, doesn't look elegant (due to the recursion) &amp; I think there's an 'angular way' for this.</p>
  
  <p>Has anybody tried this &amp; got it working in a better fashion? How do I get around it?</p>