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">
    <div class='paginator'>
        <ul>
            <li class='current'>1</li>
            <li class='active' ng-click='gotoPage(2)'>2</li>
            <li class='active' ng-click='gotoPage(3)'>3</li>
            <li class='active' ng-click='gotoPage(4)'>4</li>
            <li class='active' ng-click='gotoPage(5)'>5</li>
        </ul>
    </div>
{{paramUri}}
</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;
}

JavaScript

angular.module('MF', ['ngResource']).controller('PageCtrl', function PageCtrl($scope, $resource, $location) {

    $scope.paramUri = $location.search;
    $scope.gotoPage = function(page) {
        $scope.mydata = $resource('#mycontroller/:action?p=:page', {
            action: 'getng',
            q: 'page'
        });
    };

    $scope.gotoPage(1);

});