<div ng-app="testApp">
  <div ng-controller="testController">
    <h1>{{title}}</h1>

    <ul>
      <li
        ng-repeat="question in data | startFrom:currentPage*pageSize | limitTo:pageSize"
      >
          {{question}}
      </li>
    </ul>

    <button
      ng-disabled="currentPage == 0"
      ng-click="currentPage=currentPage-1"
    >
      Previous
    </button>

    Page {{currentPage+1}} of {{numberOfPages()}}

    <button
       ng-disabled="currentPage >= data.length/pageSize - 1"
       ng-click="currentPage=currentPage+1"
    >
      Next
    </button>
  </div>
</div>
      (function(){
        var app = angular.module('testApp',[]);

        app.controller('testController', function($scope){
          $scope.title = "My Quiz";
          $scope.currentPage = 0;
          $scope.pageSize = 1;
          $scope.data = [];

          $scope.numberOfPages= () => {
            return Math.ceil(
              $scope.data.length / $scope.pageSize
            );
          }

          for (var i=0; i<10; i++) {
            $scope.data.push(`Question number ${i}`);
          }
        });

        app.filter('startFrom', function() {
          return (input, start) => {
            start = +start; //parse to int
            return input.slice(start);
          }
        });
      })();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js