Stacking table pagination elements on smaller screens

Question

In the code snippet below, you can see the relevant table pagination elements and styles that I am currently using. It looks just how I want it on screen sizes that are medium and larger. The problem is that on smaller screens, the pagination elements flow onto the next line, while the counts stay floated to the right, as can be seen in the screenshot below.

Screenshot of the problem:

What I would like to happen on smaller screens is for it to stack either on the left (as I have shown in the image below) or centered on the screen.

Desired result:

Code Snippet to demonstrate the issue: (click 'Full Page' and resize your browser window to below 500px width to see the issue)

 .button-group { list-style: none; margin: 0; left: 0; } .right { float: right !important; } ul { margin-left: 0 !important; line-height: 1.6; padding: 0; list-style-position: outside; } ul.pagination { display: block; min-height: 1.5rem; } ul.pagination li { color: #222; font-size: 0.875 rem; height: 1.5rem; margin-left: 0.3125rem; display: block; float: left; } ul.pagination li a { border-radius: 5px; transition: background-color 300ms ease-out; display: block; padding: 0.0625rem 0.625rem; } ul.pagination li.current a { background: #bb1018; color: #fff; cursor: default; font-weight: 700; } a { text-decoration: none; -webkit-tap-highlight-color: transparent; } .button-group.radius>* { display: inline-block; border-radius: 0; } .button-group.radius>:first-child>.button, .button-group.radius>:first-child>button { border-bottom-left-radius: 5px; border-top-left-radius: 5px; } .button-group.radius>:last-child>.button, .button-group.radius>:last-child>button { border-bottom-right-radius: 5px; border-top-right-radius: 5px; } .button-group.radius>*>.button .button-group.radius>*>button { border-radius: 0; } .button-group.radius>* .button, .button-group.radius>*>button { border-left: 1px solid; border-color: rgba(255, 255, 255, .5); } .button-group .button { border: 0; box-shadow: none; } .button.small { border-width: 2px; padding: .375rem .75rem .4375rem; font-size: 0.875rem; } .button, button { -webkit-appearance: none; border-style: solid; font-weight: 700; line-height: normal; margin: 0 0 1.25rem; position: relative; text-align: center; background-color: #bb1018; border-color: #bb1018; color: #fff; } .button { cursor: pointer; transition: all .1s ease-in-out; text-transform: uppercase; outline: 0; text-shadow: 0 1px 0 rgba(106, 80, 73, .3); } 

 <div> <div> <div class="ng-table-pager"> <ul class="ng-table-counts button-group radius right"> <li> <button type="button" class="button small active" disabled="disabled"><span>10</span> </button> </li> <li> <button type="button" class="button small"><span>25</span> </button> </li> <li> <button type="button" class="button small"><span>50</span> </button> </li> <li> <button type="button" class="button small"><span>100</span> </button> </li> </ul> <ul class="pagination ng-table-pagination"> <li class="arrow"> <a href="">«</a> </li> <li class="current"> <a href=""><span>1</span></a> </li> <li> <a href=""><span>2</span></a> </li> <li> <a href=""><span>3</span></a> </li> <li> <a href=""><span>4</span></a> </li> <li> <a href=""><span>5</span></a> </li> <li> <a href=""><span>6</span></a> </li> <li> <a href=""><span>7</span></a> </li> <li> <a href="">…</a> </li> <li> <a href=""><span>2234</span></a> </li> <li class="arrow"><a href="">»</a> </li> </ul> </div> </div> </div> 

Answer 1

Here is a simple way of fixing your problem.

Add

<div style="clear:both"></div>

Remove

class Right from Pagination

Final Code

<div ng-table-pagination="params" template-url="templates.pagination" class="ng-scope ng-isolate-scope"><!-- ngInclude: templateUrl --><div ng-include="templateUrl" class="ng-scope">
<div class="ng-table-pager ng-scope">
    <!-- ngIf: params.settings().counts.length --><ul ng-if="params.settings().counts.length" class="ng-table-counts button-group radius ng-scope">
        <!-- ngRepeat: count in params.settings().counts --><li ng-repeat="count in params.settings().counts" class="ng-scope">
            <button type="button" ng-class="{'active':params.count()==count}" ng-click="params.count(count)" class="button small active" ng-disabled="params.count()==count" disabled="disabled"><span ng-bind="count" class="ng-binding">10</span></button>
        </li><!-- end ngRepeat: count in params.settings().counts --><li ng-repeat="count in params.settings().counts" class="ng-scope">
            <button type="button" ng-class="{'active':params.count()==count}" ng-click="params.count(count)" class="button small" ng-disabled="params.count()==count"><span ng-bind="count" class="ng-binding">25</span></button>
        </li><!-- end ngRepeat: count in params.settings().counts --><li ng-repeat="count in params.settings().counts" class="ng-scope">
            <button type="button" ng-class="{'active':params.count()==count}" ng-click="params.count(count)" class="button small" ng-disabled="params.count()==count"><span ng-bind="count" class="ng-binding">50</span></button>
        </li><!-- end ngRepeat: count in params.settings().counts --><li ng-repeat="count in params.settings().counts" class="ng-scope">
            <button type="button" ng-class="{'active':params.count()==count}" ng-click="params.count(count)" class="button small" ng-disabled="params.count()==count"><span ng-bind="count" class="ng-binding">100</span></button>
        </li><!-- end ngRepeat: count in params.settings().counts -->
    </ul><!-- end ngIf: params.settings().counts.length -->
    <div style="clear:both;"></div>
    <ul class="pagination ng-table-pagination">
        <!-- ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope arrow"><!-- ngSwitchWhen: prev --><a ng-switch-when="prev" ng-click="params.page(page.number)" href="" class="ng-scope">«</a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope current"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --><a ng-switch-when="first" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">1</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: page --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --><a ng-switch-when="page" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">2</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --><a ng-switch-when="page" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">3</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --><a ng-switch-when="page" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">4</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --><a ng-switch-when="page" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">5</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --><a ng-switch-when="page" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">6</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --><a ng-switch-when="page" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">7</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --> <!-- ngSwitchWhen: more --><a ng-switch-when="more" ng-click="params.page(page.number)" href="" class="ng-scope">…</a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --><a ng-switch-when="last" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">2234</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope arrow"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --><a ng-switch-when="next" ng-click="params.page(page.number)" href="" class="ng-scope">»</a><!-- end ngSwitchWhen: --></li><!-- end ngRepeat: page in pages -->
    </ul>
</div>

Here is the Plunker of it working http://plnkr.co/edit/1uZ4QgeyTxrPlnvs15Fk?p=preview

Answer 2

You should use clear and float properties, I fixed up your code as you desire.

 .button-group { list-style: none; margin: 0; float: left; } .button-group:after { clear:both; } ul { margin-left: 0 !important; line-height: 1.6; padding: 0; list-style-position: outside; } ul.pagination { display: block; min-height: 1.5rem; float: left; clear: both; } ul.pagination li { color: #222; font-size: 0.875 rem; height: 1.5rem; margin-left: 0.3125rem; display: block; float: left; } ul.pagination li a { border-radius: 5px; transition: background-color 300ms ease-out; display: block; padding: 0.0625rem 0.625rem; } ul.pagination li.current a { background: #bb1018; color: #fff; cursor: default; font-weight: 700; } a { text-decoration: none; -webkit-tap-highlight-color: transparent; } .button-group.radius>* { display: inline-block; border-radius: 0; } .button-group.radius>:first-child>.button,.button-group.radius>:first-child>button { border-bottom-left-radius: 5px; border-top-left-radius: 5px; } .button-group.radius>:last-child>.button, .button-group.radius>:last-child>button { border-bottom-right-radius: 5px; border-top-right-radius: 5px; } .button-group.radius>*>.button .button-group.radius>*>button { border-radius: 0; } .button-group.radius>* .button, .button-group.radius>*>button { border-left: 1px solid; border-color: rgba(255,255,255,.5); } .button-group .button { border: 0; box-shadow: none; } .button.small { border-width: 2px; padding: .375rem .75rem .4375rem; font-size: 0.875rem; } .button { -webkit-appearance: none; border-style: solid; font-weight: 700; line-height: normal; position: relative; text-align: center; background-color: #bb1018; border-color: #bb1018; color: #fff; } .button { cursor: pointer; transition: all .1s ease-in-out; text-transform: uppercase; outline: 0; text-shadow: 0 1px 0 rgba(106, 80, 73, .3); } 

 <div ng-table-pagination="params" template-url="templates.pagination" class="ng-scope ng-isolate-scope"><!-- ngInclude: templateUrl --><div ng-include="templateUrl" class="ng-scope"> <div class="ng-table-pager ng-scope"> <!-- ngIf: params.settings().counts.length --><ul ng-if="params.settings().counts.length" class="ng-table-counts button-group radius right ng-scope"> <!-- ngRepeat: count in params.settings().counts --><li ng-repeat="count in params.settings().counts" class="ng-scope"> <button type="button" ng-class="{'active':params.count()==count}" ng-click="params.count(count)" class="button small active" ng-disabled="params.count()==count" disabled="disabled"><span ng-bind="count" class="ng-binding">10</span></button> </li><!-- end ngRepeat: count in params.settings().counts --><li ng-repeat="count in params.settings().counts" class="ng-scope"> <button type="button" ng-class="{'active':params.count()==count}" ng-click="params.count(count)" class="button small" ng-disabled="params.count()==count"><span ng-bind="count" class="ng-binding">25</span></button> </li><!-- end ngRepeat: count in params.settings().counts --><li ng-repeat="count in params.settings().counts" class="ng-scope"> <button type="button" ng-class="{'active':params.count()==count}" ng-click="params.count(count)" class="button small" ng-disabled="params.count()==count"><span ng-bind="count" class="ng-binding">50</span></button> </li><!-- end ngRepeat: count in params.settings().counts --><li ng-repeat="count in params.settings().counts" class="ng-scope"> <button type="button" ng-class="{'active':params.count()==count}" ng-click="params.count(count)" class="button small" ng-disabled="params.count()==count"><span ng-bind="count" class="ng-binding">100</span></button> </li><!-- end ngRepeat: count in params.settings().counts --> </ul><!-- end ngIf: params.settings().counts.length --> <ul class="pagination ng-table-pagination"> <!-- ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope arrow"><!-- ngSwitchWhen: prev --><a ng-switch-when="prev" ng-click="params.page(page.number)" href="" class="ng-scope">«</a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope current"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --><a ng-switch-when="first" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">1</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: page --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --><a ng-switch-when="page" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">2</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --><a ng-switch-when="page" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">3</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --><a ng-switch-when="page" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">4</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --><a ng-switch-when="page" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">5</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --><a ng-switch-when="page" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">6</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --><a ng-switch-when="page" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">7</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --> <!-- ngSwitchWhen: more --><a ng-switch-when="more" ng-click="params.page(page.number)" href="" class="ng-scope">…</a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --><a ng-switch-when="last" ng-click="params.page(page.number)" href="" class="ng-scope"><span ng-bind="page.number" class="ng-binding">2234</span></a><!-- end ngSwitchWhen: --> <!-- ngSwitchWhen: next --></li><!-- end ngRepeat: page in pages --><li ng-class="{'current': !page.active &amp;&amp; !(page.type=='prev' || page.type=='next' || page.type=='more'), 'arrow': page.type=='prev' || page.type=='next'}" ng-repeat="page in pages" ng-switch="page.type" class="ng-scope arrow"><!-- ngSwitchWhen: prev --> <!-- ngSwitchWhen: first --> <!-- ngSwitchWhen: page --> <!-- ngSwitchWhen: more --> <!-- ngSwitchWhen: last --> <!-- ngSwitchWhen: next --><a ng-switch-when="next" ng-click="params.page(page.number)" href="" class="ng-scope">»</a><!-- end ngSwitchWhen: --></li><!-- end ngRepeat: page in pages --> </ul> </div> </div></div>