mdVirtualRepeat demo

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc6-master-f73ef23/angular-material.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="style.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    <script src="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc6-master-f73ef23/angular-material.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="AppCtrl as ctrl" 
        ng-cloak="" 
        class="virtualRepeatdemoVerticalUsage" 
        ng-app="MyApp"
        >
      <md-content layout="column">
        <md-virtual-repeat-container id="vertical-container">
          <div 
          md-virtual-repeat="item in ctrl.items" 
          class="repeated-item" flex="">
            {{item}}
          </div>
        </md-virtual-repeat-container>
      </md-content>
    </div>
    
    
  </body>
  

</html>

// Code goes here

(function () {
  'use strict';

    angular
      .module('MyApp', ['ngMaterial'])
      .controller('AppCtrl', function() {
      var that = this;  
      this.items = [];
        
        for (var i = 0; i < 20000; i++) {
          this.items.push(i);
        }
      });

})();

/* Styles go here */

.virtualRepeatdemoVerticalUsage #vertical-container {
  height: 292px;
  width: 400px; }
.selected{
  background: gray;
}
.virtualRepeatdemoVerticalUsage .repeated-item {
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  height: 40px;
  padding-top: 10px; }

.virtualRepeatdemoVerticalUsage md-content {
  margin: 16px; }

.virtualRepeatdemoVerticalUsage md-virtual-repeat-container {
  border: solid 1px grey; }

.virtualRepeatdemoVerticalUsage .md-virtual-repeat-container .md-virtual-repeat-offsetter {
  padding-left: 16px; }