title: Pagination and UI Router in AngularJS
body: <p>I have AngularJS project with UI Router and I use Pagination in this project. I use directive and filter to make it by below code.</p>
  
  <p>Controller</p>
  
  <pre><code>newsapp.filter('startFrom', function() {
      return function(input, start) {
          if (!input || !input.length) { return; }
          start = +start; //parse to int
          return input.slice(start);
      }
  });
  </code></pre>
  
  <p>Route</p>
  
  <pre><code>newsapp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
      .state('news', {
          url: "/news",
          templateUrl: "templates/news.html",
          controller: "imageNewsCtrl"
      })  
          .state('newsThumbnail', {
          url: "/news/:nameCat",
          templateUrl: "templates/news-thumbnail.html",
          controller: "newsPageCtrl"
      })
          .state('newsDetail', {
          url: "/news/:nameCat/:idItem",
          templateUrl: "templates/news-detail.html",
          controller: "newsDetailPageCtrl"
      });         
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>    &lt;div id="content"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-3 box-preview" id="cat-{{$index}}" ng-repeat="item in imageItems | startFrom:currentPage*pageSize | limitTo:pageSize"&gt;
              &lt;a ui-sref="newsThumbnail({ nameCat: item.linkCat })" ng-class="{'activeCat': $index == div_no &amp;&amp; side == 2 || hovering == true }" ng-mouseenter="hovering=true" ng-mouseleave="hovering=false"&gt;
                  &lt;img ng-src="{{item.thumbnail}}" err-SRC="../images/no-image.png" class="img-ratio-respec"&gt;
                  &lt;div class="caption" ng-class="{'activeCat': $index == div_no &amp;&amp; side == 2 || hovering == true}"&gt;{{item.nameCat}}&lt;/div&gt;
              &lt;/a&gt;    
          &lt;/div&gt;                                            
      &lt;/div&gt;  
      &lt;div class="row"&gt;
          &lt;div class="col-md-9 menu-control-bar"&gt;
              &lt;button class="btn btn-default" id="buttLeft" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1 || currentPage == 0" ng-class="{'focus': but_no == 1 &amp;&amp; side == 3 }" &gt;
                  &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;/button&gt;
               {{currentPage+1}} / {{numberOfPages()}}
              &lt;button class="btn btn-default" id="buttRight" ng-disabled="currentPage &gt;= imageItems.length/pageSize - 1" ng-click="currentPage=currentPage+1" ng-class="{'focus': but_no == 2 &amp;&amp; side == 3 }" &gt;
                  &lt;span class="glyphicon glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>I want use back button to history of pagination. If I choose page 2 in state <strong>news</strong>, select item for view other page. When I click back button, I want to show previous page I choose. (<a href="https://stackoverflow.com/questions/22290741/how-to-change-the-url-when-paging-using-ui-router" title="like this question">like this question</a> but I din't understand. sorry)</p>
  
  <p>How about idea for this or suggest me.</p>
  
  <p>Thanks :)</p>