title: Angularjs push array of data retrieved from a resource service in another array in scope
body: <p>I´m trying to implement a pagination service. So, in a controller I have two methods to get a list of boats from my database (using a Rails API). To get the data the controller is using a service with a resource (simple query method):</p>
  
  <pre><code>.factory('Boat', 
  
        function($resource){          
          var boats =
           $resource('http://127.0.0.1\\:3000/:action', {}, {     
              query: {method:'GET', params:{action:'boats'}, isArray:true},
              getBoatsByBusinessId: {method:'GET', params:{action:'boatsByBusinessId'}, isArray:true}
           });        
           return boats;            
        }
    )
  </code></pre>
  
  <p>In my controller, I have two methods (maybe I could use just one, but I think this is not important this point):</p>
  
  <pre><code>$scope.getOptionList = function(departure, departureDate, arrivalDate, people) { 
    $scope.pagIndex = 0;                      
    $scope.boats = Boat.query({pagIndex: $scope.pagIndex}); // List of boats is filled correctly
  };
  </code></pre>
  
  <p>and <strong>OPTION_1:</strong> </p>
  
  <pre><code>   $scope.moreResultsBoats = function() {  
          $scope.pagIndex = $scope.pagIndex + 1;                                 
          $scope.moreBoats = Boat.query({pagIndex: $scope.pagIndex});
  
          console.log("moreBoats:" + $scope.moreBoats);
          angular.forEach($scope.moreBoats, function(boat, key) {             
              $scope.boats.push(boat);
          });
    }
  </code></pre>
  
  <p>or <strong>OPTION_2</strong>:</p>
  
  <pre><code>$scope.moreResultsBoats = function() {  
              $scope.pagIndex = $scope.pagIndex + 1;                                 
              $scope.moreBoats = Boat.query({pagIndex: $scope.pagIndex});
  
              console.log("moreBoats:" + $scope.moreBoats);
              $scope.boats.push.apply($scope.boats, $scope.moreBoats);
  }
  </code></pre>
  
  <p>Neither of the OPTIONS add the array of new boats in $scope.moreBoats to the $scope.boats (or at least the view is not refreshed).
  I think I don´t understand something about how AngularJS works, because console.log only displays this: <code>moreBoats:</code>.</p>
  
  <p>However, if I add {{moreBoats | json }} to my view, for tracking purposes, I can see the boats in json when they come.</p>
  
  <p>What am I missing?</p>
  
  <p>Thanks,
  Roberto.</p>