JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="ctrl">
    <ul>
        <li ng-click="ShowFirstPage();"><a href="#">First</a>

        </li>
        <li ng-click="ShowPrevPage();"><a href="#">Prev</a>

        </li>
        <li>
            <select ng-model="SelectedPage" ng-change="ShowPageResult();" ng-options="num for num in PageNumbers track by num"></select>
        </li>
        <li ng-click="ShowNextPage();"><a href="#">Next</a>

        </li>
        <li ng-click="ShowLastPage();"><a href="#">Last</a>

        </li>
    </ul>
</div>

CSS

ul {
    list-style:none;
}
ul li {
    margin:5px;
    float:left;
}

JavaScript

var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
    $scope.PageNumbers = [];
    $scope.SelectedPage = 1;

    $scope.ShowFirstPage = function () {
        if ($scope.SelectedPage > 1) {
            $scope.SelectedPage = 1;
        }
    }
    $scope.ShowPrevPage = function () {
        if ($scope.SelectedPage > 1) {
            $scope.SelectedPage = $scope.SelectedPage - 1;
        }
    }
    $scope.ShowPageResult = function () {
        alert($scope.SelectedPage);
    }
    $scope.ShowNextPage = function () {
        if ($scope.SelectedPage < 3) {
            $scope.SelectedPage = $scope.SelectedPage + 1;
        }
    }
    $scope.ShowLastPage = function () {
        if ($scope.SelectedPage < 3) {
            $scope.SelectedPage = 3;
        }
    }

    function BindPageNumbers(totalRows, selectedPage) {
        $scope.PageNumbers = [];
        for (var i = 1; i <= totalRows; i++) {
            $scope.PageNumbers.push(i);
        }
        $scope.SelectedPage = selectedPage;
    }
    var init = function () {
        var promise = {};
        promise.then(function (success) {

            BindPageNumbers(5, 1);
        },

        function (error) {
            alert(error);
        });
    }
    init();
});