<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.11" src="https://code.angularjs.org/1.3.11/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-aria.min.js"></script>
    <script src="https://cdn.rawgit.com/angular/bower-material/v0.8.3-master-f62fd48/angular-material.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chance/0.5.6/chance.min.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/v0.8.3-master-f62fd48/angular-material.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="demoMD">
    <h1>Kitchen Sink NG-Material Demo!</h1>
    
    <div ng-controller="KitchenSinkCtrl">
      <md-toolbar layout="row" layout-align="center center" layout-padding>
        <h2 flex>People ({{people.length}})</h2>
        <form ng-submit="addPeople(numPeople)">
          <input type="number" ng-model="numPeople" />
          <input type="submit" value="Add People" />
        </form>
        </md-toolbar>
        <md-content ng-include="peopleTemplate"></md-content>
    </div>
    
  </body>

</html>

// Code goes here
var chance = new Chance();

var app = angular.module('demoMD', [
    'ngMaterial'
    // TODO: Eventually we should refactor our "resources" to be individual submodules, like 'tvlApp.probes', 'fnet.identity', 'fnet.data', etc...
]);

app.controller('KitchenSinkCtrl', ['$rootScope','$scope','$timeout', function($rootScope,$scope,$timeout) {
  $scope.people = [];

  $scope.addPeople = function(numPeople) {
    var people = [];
    
    for(var i = 0; i < numPeople; i++) {
      var bender = chance.bool();
      
      people.push({
        id: 'fake-id-'+chance.guid(),
        name: chance.name(),
        bender: bender,
        pic: bender ? 'http://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png' : 'http://upload.wikimedia.org/wikipedia/en/thumb/2/28/Philip_Fry.png/175px-Philip_Fry.png',
        birthday: chance.birthday()
      });
    }
    $scope.people = $scope.people.concat(people);
  }
  $scope.addPeople(100);
  
  $scope.peopleTemplate = "md-people.html";
}]);

/* Styles go here */

.face {
  border-radius: 30px;
  border: 1px solid #ddd;
  width: 48px;
  margin: 16px; }
  <md-content>
    <md-list>
      <md-item ng-repeat="person in people">
        <md-item-content>
          <div class="md-tile-left">
              <img ng-src="{{person.pic}}" class="face" alt="{{person.name}}">
          </div>
          <div class="md-tile-content">
            <h3>{{person.name}}</h3>
            <p>
              Birthday: {{person.birthday}}
            </p>
          </div>
        </md-item-content>
      </md-item>
    </md-list>
  </md-content>