JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/oboe.js/2.1.4/oboe-browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.2/pagination.min.js"></script>
<html ng-app="myApp">
<head>
</head>
<body>
<div class="d-flex align-center tcolor-2a95cf text-center padding-t-25 padding-s-45-products no-margin row">
<div class="productimg col-lg-4 col-md-4" ng-repeat="product in products | limitTo : limit : (currentPage - 1) * limit track by product.id"
ng-class="{lastItem: $last}" scroll-bottom="event">
<div class="row">
<div class="col-md-12" ng-bind="product.id"></div>
<div class="col-md-12">
<a ng-bind="product.name" href="{{product.id}}.nl"></a>
</div>
</div>
</div>
<div class="col-lg-12 text-center margin-t-30">
<ul uib-pagination
total-items="totalItems"
ng-model="currentPage"
items-per-page="limit">
</ul>
</div>
</div>
</body>
</html>
JavaScript
var myApp = angular.module('myApp',['ngRoute', 'pascalprecht.translate','ngSanitize', 'infinite-scroll', 'http-auth-interceptor', 'ui.bootstrap', 'ui.grid', 'ngOboe']);
angular.module('myApp').controller('CartController', ['$http', '$scope', '$timeout', 'settingsService', 'productService', 'customerService', 'cartService', 'Oboe', '$cacheFactory', function($http, $scope, $timeout, settingsService, productService, customerService, cartService, Oboe, $cacheFactory) {
// Define max limit and pagination
$scope.limit = 30;
$scope.currentPage = 1;
// Get the products
function createProduct(id, name) {
this.id = id;
this.name = name;
}
$scope.products = [];
oboe({
url: 'get.json',
method: 'GET',
cached: true
}).path('products.product.*', function () {
// we don't have the person's details yet but we know we
// found someone in the json stream. We can eagerly put
// their div to the page and then fill it with whatever
// other data we find:
}).start(function () {
console.log("start");
}).node('products.product.*', function (products) {
// we just found out their name, lets add it
// to their div:
$scope.products.push({
id: products.id,
name: products.name.language
});
$scope.totalItems = $scope.products.length;
return new createProduct(products.id, products.name);
}).done(function () {
console.log( $scope.products );
});
}]);