JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.0.0rc5/angular-1.0.0rc5.min.js"></script>
<script src="http://code.angularjs.org/1.0.0rc5/angular-resource-1.0.0rc5.min.js"></script>
<div ng-app='MF' id='container' ng-controller="PageCtrl">
    <table>
        <tr ng-repeat="item in currentPage.items"><td>{{item.field1}}</td><td>{{item.field2}}</td></tr>
    </table>
    
    <div class='paginator'>
        <ul>
            <li ng-class='isCurrentClass(page)' ng-repeat="page in pages" ng-click="gotoPage(page.index)">{{page.index}}</li>
        </ul>
    </div>
</div>

CSS

#container .paginator ul li.inactive,
#container .paginator ul li.inactive:hover {
    background-color:#ededed;
    color:#bababa;
    border:1px solid #bababa;
    cursor: default;
}
#container .paginator {
    width: 800px;
    height: 25px;
}
#container .paginator ul li {
    list-style: none;
    float: left;
    border: 1px solid #006699;
    padding: 2px 6px 2px 6px;
    margin: 0 3px 0 3px;
    font-family: arial;
    font-size: 14px;
    color: #006699;
    font-weight: bold;
    background-color: #f2f2f2;
}
#container .paginator ul li:hover {
    color: #fff;
    background-color: #006699;
    cursor: pointer;
}
#container .paginator ul li.current {
    color:#fff;
    background-color:#006699;
}
td { border: 1px solid; padding: 10px; }

JavaScript

var module = angular.module('MF', ['ngResource']);


module.factory('PagedResource', function() {
    var buildPage = function(pageIndex) {
        return {
            index: pageIndex,
            items: [{
                field1: 'A',
                field2: 'B' + pageIndex},
            {
                field1: 'C',
                field2: 'D' + pageIndex},
            {
                field1: 'E',
                field2: 'F' + pageIndex},
            {
                field1: 'G',
                field2: 'H' + pageIndex}]
        };
    };

    var pages = [buildPage(1), buildPage(2), buildPage(3), buildPage(4)];

    this.getPage = function(pageIndex) {
        return pages[pageIndex - 1];
    };
    this.getPageList = function() {
        return [{
            index: 1
        }, {
            index: 2
        }, {
            index: 3
        }, {
            index: 4
        }];
    };

    return this;
});

module.controller('PageCtrl', function($scope, PagedResource) {
    $scope.gotoPage = function(pageIndex) {
        console.log("goto Page " + pageIndex);
        $scope.currentPage = PagedResource.getPage(pageIndex);
        console.log($scope);
    };
    $scope.isCurrentClass = function(page) {
        return page.index == $scope.currentPage.index ? "current" : "active";
    };

    $scope.pages = PagedResource.getPageList();
    $scope.gotoPage(1);

});