JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" ng:autobind
        src="http://code.angularjs.org/0.9.17/angular-0.9.17.js"></script>

<div ng:controller="PagesControl">
    <p>{{pages[curpage].body}}</p> 
    <ul ng:controller="PaginationControl">
        <li ng:click="prev()"><button>pre</button></li>
        <li ng:repeat="page in pageList"><button ng:click="select(page)">{{pages.indexOf(page)+1}}</button></li>
        <li ng:click="next()"><button>nxt</button></li>
        
    </ul>        
</div>

CSS

li{
    display: inline-block;
    padding : 10px;
}

JavaScript

function PagesControl(){
   var self = this; 
   self.pages = [
        {body:"page 1"},
        {body:"page 2"},
        {body:"page 3"},
        {body:"page 4"},
        {body:"page 5"},
        {body:"page 6"},
        {body:"page 7"},
        {body:"page 8"},
        {body:"page 9"},
        {body:"page 10"}
    ];
    self.curpage = 0;
    
    self.select = function(page){
        self.curpage = self.pages.indexOf( page );
    }
    
    self.next = function(){
        var newp = self.curpage + 1
        self.curpage = newp < self.pages.length ? newp : 0;
    }
    self.prev = function(){
        var newp = self.curpage - 1
        self.curpage = newp > -1 ? newp : 0;
    }
    self.first = function(){
        self.curpage = 0;
    }
    self.last = function(){
        self.curpage = self.pages.length - 1;
    }   
}

function PaginationControl(){
    var self = this;
    self.limit = 3;
    self.$watch( "curpage", function( newval, oldval ){
        var pos = Math.floor( newval / self.limit ) * self.limit; 
        
        self.pageList = self.pages.slice( pos, pos + self.limit );
    } )
}