JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder" ng-controller="moListFilter" ng-app>
		<div >{{getPickedPeopleCount()}} of {{getAllPeopleCount()}} {{getMO()}} </div><br>
		<table id="pList">
	    	<tr>
	    		<th>Last Name <input type="text" name="searchlname" ng-model="search.lname" ng-change="searchPeople()"></th>
	    		<th>First Name <input type="text" name="searchfname" ng-model="search.fname" ng-change="searchPeople()"></th>
	    		<th>Use</th>
	    	</tr>
	    	<tr ng-repeat="person in pagedItems[currentPage]">
	    		<td>{{person.LASTNAME}}</td>
	    		<td>{{person.FIRSTNAME}}</td>
	    		<td><input type="checkbox" ng-model="person.PICKED"></td>
	    	</tr>
	    </table>
	    <table>
	    	<tr>
	    		<td width="33%"><button class="button" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"><< Previous</button></td>
	    		<td width="33%"><div class="button2" style="text-align:center;">Page {{currentPage+1}} of {{pagedItems.length}}</div></td>
	    		<td width="33%" style="text-align:right;"><button class="button" ng-disabled="currentPage == pagedItems.length - 1" ng-click="currentPage=currentPage+1">  Next >></button></td>
	    	</tr>
	    </table>
    </div>

JavaScript

function moListFilter($scope, $filter,$http){
  $scope.allPeople = [];
  $scope.getAllPeople = function(){
    // $http.post('angular.cfc?method=returnSerializeQuery').success(function(data) {
    //   $scope.allPeople = data;
    // });

    $scope.allPeople = [
      {FIRSTNAME:'fname1', LASTNAME: 'person1'},
      {FIRSTNAME:'fname2', LASTNAME: 'person2'},
      {FIRSTNAME:'fname3', LASTNAME: 'person3'},
      {FIRSTNAME:'fname4', LASTNAME: 'person4'},
      {FIRSTNAME:'fname5', LASTNAME: 'person5'},
      {FIRSTNAME:'fname6', LASTNAME: 'person6'},
      {FIRSTNAME:'fname7', LASTNAME: 'person7'},
    ];

  }
  $scope.getAllPeople();

  $scope.filteredPeople = $scope.allPeople;
  $scope.search = {fname:'',lname:''};

  // START SEARCH FILTER
  $scope.searchPeople = function(){
    var filter = $filter('filter');
    var searchCrit = $scope.search;
    var newlist = $scope.allPeople;
    newlist = filter(newlist,{LASTNAME:searchCrit.lname,FIRSTNAME:searchCrit.fname});
    $scope.filteredPeople = newlist;
    $scope.currentPage = 0;
    $scope.groupToPages();
    console.log('searched');
  }
  // END SEARCH FILTER

  $scope.getAllPeopleCount = function(){ return $scope.allPeople.length; }
  $scope.getPickedPeopleCount = function(){var filter = $filter('filter'); return filter($scope.allPeople,{PICKED:'true'}).length; }
 
  // PAGINATION
  $scope.currentPage = 0;
  $scope.itemsPerPage = 20;
  $scope.groupToPages = function () {
    $scope.pagedItems = [];
    for (var i = 0; i < $scope.filteredPeople.length; i++) {
      if (i % $scope.itemsPerPage === 0) {
        $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredPeople[i] ];
      } else {
        $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredPeople[i]);
      }
    }
    console.log('grouped');
  };
  $scope.groupToPages();
  $scope.range = function (start, end) {
    var ret = [];
    if (!end) {end = start;start = 0;}
    for (var i = start; i < end; i++)...