title: AngularJS - Save as multiple rows - data coming from ng-repeat
body: <p>Hello new to AngularJS and I am trying to wrap my head around something...</p>
  
  <p>Basically I have a form that can accept 1 to many "Guests" for an event. Using ng-repeat I display the fields like so:</p>
  
  <pre><code>&lt;div ng-repeat="guest in guests"&gt;
    &lt;input type="text" ng-model="guests[$index].first_name" /&gt;
    &lt;input type="text" ng-model="guests[$index].last_name" /&gt;
    &lt;select ng-model="guests[$index].meal" ng-options="meal.id as meal.name for meal in meals"&gt;&lt;/select&gt;
    &lt;select ng-model="guests[$index].rsvp"&gt;
      &lt;option value="0"&gt;No&lt;/option&gt;
      &lt;option value="1"&gt;Yes&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="controls"&gt;&lt;button ng-click="submit()" class="btn btn-success"&gt;Save&lt;/button&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And in the controller:</p>
  
  <pre><code>  //DETERMINE TOTAL IN PARTY
    var totalInParty = 2;
    $scope.meals = RSVPRes.Meals.query();
  
    //EDIT
    if ($scope.rsvpId) {
    }
    //NEW RSVP SUBMISSION
    else {
      $scope.rsvp = new RSVPRes.RSVP();
      //INITIALIZE EMPTY GUESTS
      $scope.guests = [];
      for (var i = 0; i &lt; totalInParty; i++) {
        $scope.guests[i] = {
          first_name: '',
          last_name: '',
          meal: 1,
          rsvp: 0
        };
      }
    }
  </code></pre>
  
  <p>And my Resource</p>
  
  <pre><code>.factory( 'RSVPRes', function ( $resource )  {
    return {
      RSVP: $resource("../reservations/:id.json", {id:'@id'}, {'update': {method:'PUT'}, 'remove': {method: 'DELETE', headers: {'Content-Type': 'application/json'}}}),
      Meals: $resource('../meals.json')
    };
  })
  </code></pre>
  
  <p>Now all this works really well - I am just having trouble saving the data. I would like to save each Guest (First Name, Last Name, Meal &amp; RSVP) as it's own row.</p>
  
  <p>If I try this:</p>
  
  <pre><code>$scope.submit = function() {
    for(var i = 0; i &lt; $scope.guests.length; i++){
      $scope.rsvp.first_name = $scope.guests[i].first_name;
      $scope.rsvp.last_name = $scope.guests[i].last_name;
      $scope.rsvp.meal_id = $scope.guests[i].meal;
      $scope.rsvp.rsvp = $scope.guests[i].rsvp;
      $scope.rsvp.$save();
     }
     $state.transitionTo('rsvps');
   };
  </code></pre>
  
  <p>It creates two rows (total_in_party set to 2) but it's always the 2nd persons data.</p>
  
  <p>Feel like I am close, I looked a quite a few ng-repeat examples, but couldn't find one that deals with my specific case!</p>
  
  <p>Any help is appreciated.</p>
  
  <p><strong>SOLVED</strong></p>
  
  <p>I totally duffed my thinking about the Resource, creating a new RSVP object now everytime in the loop.</p>
  
  <pre><code>$scope.submit = function() {
    for(var i = 0; i &lt; $scope.guests.length; i++){
      $scope.rsvp = new RSVPRes.RSVP();
      $scope.rsvp.first_name = $scope.guests[i].first_name;
      $scope.rsvp.last_name = $scope.guests[i].last_name;
      $scope.rsvp.meal_id = $scope.guests[i].meal;
      $scope.rsvp.rsvp = $scope.guests[i].rsvp;
      $scope.rsvp.$save();
     }
     $state.transitionTo('rsvps');
   };
  </code></pre>