title: Angularjs Dynamically add new div with child elements and model
body: <p>I have a jsfiddle set up at <a href="http://jsfiddle.net/skwidgets/gnvVY/13/" rel="nofollow">http://jsfiddle.net/skwidgets/gnvVY/13/</a></p>
  
  <p>Basically there is a div with a few form elements in it including two drop down menus a radio button group and a link to remove that row.</p>
  
  <pre><code>&lt;div ng-app="myapp"&gt;
  &lt;div id="w" ng-controller="survey"&gt;
      &lt;div class="qs"&gt;
          &lt;div class=""&gt;1&lt;/div&gt;
          &lt;div class=""&gt;
              &lt;select data-role="none" name="w1.selected_location" data-ng-model="w.w1.selected_location" ng-options="location.value as location.label for location in locations"&gt;
                  &lt;option value=""&gt;Choose a Location&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class=""&gt;
              &lt;select data-role="none" name="selected_stage" data-ng-model="w.w1.selected_stage" ng-options="stage.value as stage.label for stage in stages"&gt;
                  &lt;option value=""&gt;Choose a Stage&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class=""&gt;
              &lt;input data-role="none" type="radio" name="wI4" value="true" data-ng-model="w.w1.wIn24"&gt;
          &lt;/div&gt;
          &lt;div class=""&gt;
              &lt;input data-role="none" type="radio" name="wI4" value="false" data-ng-model="w.w1.wIn24"&gt;
          &lt;/div&gt; &lt;a href="#"&gt;Remove&lt;/a&gt;
  
      &lt;/div&gt;
      &lt;div&gt;
          &lt;button data-role="none"&gt;Add Row/button&gt;{{w | json}}&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      var locations = [{
      label: 'Head',
      value: 9,
  
  }, {
      label: 'Shoulders',
      value: 5,
  }
  // ... more would go here
  ];
  
  var stages = [{
      label: 'I',
      value: 0
  }, {
      label: 'II',
      value: 1
  }];
  &lt;/script&gt;
  </code></pre>
  
  <p>They are wrapped in a div with a class of "qs".  All the selections are populated to a model called "w1" There is a button to add another row of these form elements and there parental container to the dom if the user wants to add another but it has to have a different model name that is similar to the first of (w1) but the number in the model name is incremented (w2, w3, and so forth) and so is the row number.</p>
  
  <p>I have tried to make a directive to handle the behavior but have not had any luck.</p>
  
  <p>Any Ideas will be appreciated.  </p>