<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

      <title>testApp</title>

      <link rel="stylesheet" href="style.css">
      <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
      <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
      <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.3.0/ng-infinite-scroll.min.js"></script>         
      <script src="script.js" ></script>
   </head>

  <body ng-app="testApp" ng-controller="appCtrl as vm">
    
    <button class="button button-positive" ng-click="vm.showPopup()">Show Popup</button>
    
    <script id="templates/popup.html" type="text/ng-template">
      
      <ion-content class="has-header has-footer" overflow-scroll="false">
        <div class="list">
            <div class="item"
                 ng-repeat="item in popup.list track by $index"
                 ng-if="$index < popup.limit">
            item{{$index}}
            </div>
        </div>
        
        <ion-infinite-scroll
          on-infinite="popup.loadMore(popup.limit)"
          spinner="android"
          distance="10%">
        </ion-infinite-scroll>      
      </ion-content>

        
    </script>
  </body>

</html>
// Code goes here
(function (angular) {
    
    angular
        .module("testApp", ["ionic", "infinite-scroll"])
        .controller("appCtrl", AppCtrl)
        
    AppCtrl.$inject = ["$scope", "$ionicPopup", "$timeout"]
    function AppCtrl(Scope, IonicPopup, Timeout) {
        var vm = this

        vm.showPopup = function () {
           var popup = Scope.popup = {}
           popup.list = new Array(50)
           popup.limit = 10
           popup.loadMore = function (limit) {
              console.log("loadMore is called!")
              if (popup.busy) {
                console.log("popup already loading.."); return 
              }
              popup.busy = true
              // Using a time out to show some spinner to know its working.
              Timeout(function () {
                 popup.limit = popup.limit + 10
                 popup.showLoader = showLoader()
                 if (!popup.showLoader) {
                   popup.showLoader = false 
                   console.log("showLoader is false")
                 } else {
                   popup.busy = false
                 }
              }, 1000)
           }
           
           function showLoader() {
              return popup.busy && popup.list.length > popup.limit
           }
           
           IonicPopup.show({
            title: 'A list',
            templateUrl: 'templates/popup.html',
            scope: Scope,
            buttons: [{
               text: 'ok',
               type: 'button-positive',
               onTap: function (e) {
                  // prevents closing popup
                  // e.preventDefault()
                  console.log("Ok ")
               }
            }, {
               text: 'Cancel',
               type: 'button-default',
               onTap: function (e) { }
            }]
           }).then(function  () {
              Scope.popup = null
           })
        }
    }
    
})(angular)
/* Styles go here */