JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/sroze/ngInfiniteScroll/blob/master/build/ng-infinite-scroll.min.js"></script>
<!doctype html>
  <body ng-app="testNames">
    <div>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <h1>Hello, {{ yourName }}!</h1>
    </div>

    <div ng-controller="testNamesCtrl">
    	<ul infinite-scroll="addMoreItems()">
    		<li ng-repeat="name in names">
    			<div>
    				{{name.Name}} <br />
    				{{name.City}} <br />
    				{{name.Country}} <br />
    			</div>
    		</li>
    	</ul>
    </div>
   

  </body>

JavaScript

angular.module('names', [])

.factory('names', function($http) {
  var names = {};
  names.get = function(callback) {
    $http.get('http://www.w3schools.com/website/Customers_JSON.php').success(function(data) {
      callback(data);
    });
  };
  return names;
});

angular.module('testNames', ['names', 'infinite-scroll'])

.controller('testNamesCtrl', function ($scope, names){

    names.get(function (data) {
      $scope.names = data;
    })

});