Ionic Framework infinite scroll with http get data

Question

I've just started using ionic framework (brilliant) and i'm new to angular. I have a web service running and the app is supposed to load data. I've managed to retrieve data, put, WordPress rest API is sending data in form of pages, and i don't know how to achieve that with infinite-scroll on tabs, here is my HTML markup:

<ion-view title="All Wallpapers">
  <ion-content ng-controller="MyCtrl">
    <div class="row" >
    <div ng-controller="PostsController" >
        <div ng-repeat="post in posts">
            <div class="col col-50">
                    <div class="list card">
                          <div class="item item-image">
                            <img ng-src="{{post.thumbnail}}"></>
                          </div>
                          <a class="item item-icon-left assertive" href="#">
                            <i class="icon ion-android-image"></i>
                            {{post.thumbnail_images.full.width}} x {{post.thumbnail_images.full.height}}
                          </a>
                    </div>
            </div>
    </div>
  </div>
  </div>
     <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
 </ion-content>
</ion-view>

And in my apps.js i have:

wallweight.controller('PostsController', function($scope, $http) {
    $scope.page = 1;

    var url='http://wallweight.com/api/get_recent_posts?page';
    $http.get(url).
    success(function(data, status, headers, config) {

        $scope.posts = data.posts;
        console.log(data);
    }
).


    error(function(data, status, headers, config) {

    });


});
function MyCtrl($scope, $http) {
  $scope.posts = [];
  $scope.loadMore = function() {
    $http.get('http://wallweight.com/api/get_recent_posts?page=2').success(function(items) {
      $scope.posts.push($scope.posts.items);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };

  $scope.$on('$stateChangeSuccess', function() {
    $scope.loadMore();
  });
}

The second function does load the data, but does not append it to the original data. Thank you for your time.

P.S. I've viewed many codepen examples, however, i cant seem to get them working.

EDIT:

Okay, I've managed to narrow down the problem. I was misusing the controllers now i get the data, but the new data replaces the old data.

  function MyController($scope, $http) {
  $scope.posts = [];
  $scope.page=1;
  $scope.loadMore = function() {
    $http.get('http://wallweight.com/api/get_recent_posts?page='+$scope.page).success(function(items) {
      $scope.posts=items.posts;
      console.log(items.posts);
      $scope.$broadcast('scroll.infiniteScrollComplete');
      console.log($scope.page);
      $scope.page +=1;
    });
  };

I understand $scope.posts = items.posts is wrong, i just cant find a way to append it.

Answer 1

Got it working :)

function MyController($scope, $http) {
  $scope.posts = [];
  $scope.page=1;
  $scope.loadMore = function() {
    $http.get('http://wallweight.com/api/get_recent_posts?page='+$scope.page).success(function(items) {
     var i = items.posts.length;
     $scope.posts = $scope.posts.concat(items.posts);
     $scope.posts.push(items);
      console.log(items.posts[0]);
      $scope.$broadcast('scroll.infiniteScrollComplete');
      console.log($scope.page);
      $scope.page +=1;
    });
  };