angular-range-filter

<!DOCTYPE html>
<html ng-app="rangeDemo">

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="RangeController">
    <div>
      <ul>
        <li ng-repeat="item in items | range:3:9">
              {{ item }}
          </li>
      </ul>
    </div>
  </body>

</html>

angular.module('rangeDemo', [])
.controller('RangeController', ['$scope', function($scope){
    $scope.items = ['Amman', 'Ankara', 'Baku', 'Benxi', 'Berlin', 'Darwin', 'El Pas, TX', 'Fremont, CA', 'Genoa', 'Gothenburg', 'Harmburg', 'Houston, TX', 'Irkutsk', 'Istanbul', 'Jamestown', 'Kabul', 'La Paz', 'Liverpoool', 'Madison, WL', 'Manaus', 'Mata-Utu', 'Melbourne', 'Merida', 'Minsk'];
}])
.filter('range', [function(){
    return function(value, start, end){
        return value.slice(start, end);
    };
}]);

html{
  width: 100%;
  height: 100%;
}
body{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

div{
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

div ul{
  height: 138px;
  width: 138px;
  overflow-y: auto;
}