Cordova android: загрузка данных из базы данных с бесконечной прокруткой в ​​onsenui

Я занимаюсь разработкой гибридного мобильного приложения с Onsenui и Cordova для Android, в котором я хочу отображать некоторые данные на домашней странице и загружать больше элементов при прокрутке вниз.
Я знаю, что это достигается с помощью ons-infinite-scroll
Вот что я попробовал

<ons-scroller
infinit-scroll-enable="true"  can-load="true" on-scrolled="populateList()" threshold="2" style="height:100%">
<div ng-repeat="item in items">
//display the data
</div>
</ons-scroller>

Js

module.controller('AppController', function($scope,$http) {
//for initial loading
$scope.items=new Array();
$scope.page=1;
$http.get(url+"getlotterylist").then(function(msg){
$scope.loading=false;
$scope.items=msg.data;
});
//load more when scrolls down
$scope.populateList=function(){


$http.get(url+"getlotterylist&&page="+$scope.page).then(function(msg){
$scope.items=msg.data;
$scope.page +=1;
});
}

}

Актуальная проблема, когда прокрутите его вниз заменяет старые данные новыми .Как я могу решить это?. Также я хочу остановить прокрутку после получения всех данных

PHP

function get_lottery_list(){
$limit=7;
$page=(isset($_GET['page']))?$_GET['page']:1;
$start=($page-1)*$limit;
$connect=db_connect();
$result=$connect->prepare("SELECT * FROM `daily_draw_details` ORDER BY `id` DESC LIMIT $start,$limit");
$result->execute();
echo json_encode($result->fetchAll(PDO::FETCH_ASSOC));
}