JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.2.16/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <div style="border:1px solid #F00">
        <div ng-init="limit=10;start=0;">
            <div style="border:1px solid #F00; display:inline-block;width:500px">
                Pages:
                <ul class="pagination">
                    <li ng-repeat="count in values.length|range:limit:start+1" >
                        <label >
                            <input ng-if="count|isNum" type="radio" name="pages" ng-checked="$index==0"/>
                            <span ng-if="count|isNum" ng-click="$parent.$parent.start=count">{{count+1}}</span>
                            <span ng-if="!(count|isNum)" >{{count}}</span>
                        </label>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

li {
    cursor:pointer;
}
li:hover {
    background-color:#F00;
    color:#FFF;
}
.pagination li {
    display:inline-block;

}
.pagination li label span{
    padding:5px;
    display:inline-block;
    cursor:pointer;
}
.pagination li label input{
    display:none;
}
.pagination li label input:checked+span{
        background-color:#F0F;
}

JavaScript

angular.module('myApp', [])
    .controller("myController", function ($scope) {
    $scope.values = (function () {
        var arr = [];
        for (var a = 0; a < 1000; a++) {
            var text = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

            for (var i = 0; i < 5; i++)
            text += possible.charAt(Math.floor(Math.random() * possible.length));
            arr.push({val:text})
         		console.log(arr);
        }
        return arr;
    })();
}).filter('range', function () {
    return function (val, limit,current) {
        var arr = [];
        val = val / limit;
        if(current<6){
            
            for(var i=0;i<8;i++)
                arr.push(i);
            arr.push("...");
            arr.push(val-1)
        } else if(current>(val-5)){
            arr.push(0)
            arr.push("...");
            for(var i=val-7;i<val;i++)
                arr.push(i);
        } else{
            arr.push(0);
            arr.push("...")
            arr.push(current-3);
            arr.push(current-2);
            arr.push(current-1);
            arr.push(current);
            arr.push(current+1);
            arr.push("....")
            arr.push(val-1)
        }
        return arr;
    }
}).filter('isNum', function () {
    return function (val) {
        return !isNaN(val)
    };
});