title: Skipping some records from ng-repeat and showing dots
body: <p>I developed pagination for list, and I stuck in one thing, I used ng-repeat for page counts, But when results are more say 1000, it is showing 1 2 3 4 till 100, it doesn't look good to display all page counts at once. So I Wanted to display page counts to 9, 
  i.e. if it is first page, page counts will look like</p>
  
  <p>1 2 3 4 5 6 7 ... 100</p>
  
  <p>If it is 50th page, the count list should display</p>
  
  <p>1 ... 48 49 50 51 52 ... 100 </p>
  
  <p>If it is 100th page, the count list should display</p>
  
  <p>1 ... 94 95 96 97 98 99 100 </p>
  
  <p>This will consume small space as well as it will look good.</p>
  
  <p><a href="http://jsfiddle.net/dlinx/habpL97s/" rel="nofollow">Here</a> is what I did till now.</p>
  
  <p><em>For some other reason I can't use any other library only for pagination.</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('myApp', [])
    .controller("myController", function($scope) {
      $scope.values = (function() {
        var arr = [];
        for (var a = 0; a &lt; 1000; a++) {
          var text = "";
          var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  
          for (var i = 0; i &lt; 5; i++)
            text += possible.charAt(Math.floor(Math.random() * possible.length));
          arr.push(text)
        }
        return arr;
      })();
    }).filter('range', function() {
      return function(val, limit) {
        var arr = [];
        val = val / limit;
        for (var i = 0; i &lt; val; i++) {
          arr.push(i);
        }
        return arr;
      }
    }).filter('slice', function() {
      return function(arr, end, start) {
        start = start || 0;
        return (arr || []).slice(start, start + end);
      };
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app="myApp" ng-controller="myController"&gt;
    &lt;div style="border:1px solid #F00"&gt;
      &lt;div ng-init="limit=10;start=0;"&gt;
        &lt;div style="border:1px solid #F00; display:inline-block;width:500px"&gt;
          Pages:
          &lt;ul class="pagination"&gt;
            &lt;li ng-repeat="count in values.length|range:limit"&gt;
              &lt;label ng-click="$parent.start=count"&gt;
                &lt;input type="radio" name="pages" ng-checked="$index==0" /&gt;
                &lt;span&gt;{{count+1}}&lt;/span&gt;
              &lt;/label&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div style="border:1px solid #F00; display:inline-block;"&gt;
          Results Per page
          &lt;ul class="pagination"&gt;
            &lt;li ng-repeat="lim in [10,20,30,40]"&gt;
              &lt;label ng-click="$parent.limit=lim;$parent.start=0"&gt;
                &lt;input type="radio" name="records" ng-checked="$index==0" /&gt;
                &lt;span&gt;{{lim}}&lt;/span&gt;
              &lt;/label&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;ul&gt;
          &lt;li ng-repeat="val in values|slice:limit:start*limit"&gt;{{$index+1}} {{ val}}&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
   </code></pre>
  </div>
  </div>
  </p>