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

  <head>
    <script data-require="angular.js@1.2.7" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Starter AngularJS app</h1>
    <div ng-controller="ToddlerCtrl">
      <h2>Toddlers</h2>
      <table>
        <tr>
          <th>Name</th>
          <th>Birthday</th>
          <th>Happy?</th>
        </tr>
        <tr ng-repeat="toddler in toddlers">
          <td>{{toddler.name}}</td>
          <td>{{toddler.birthday}}</td>
          <td>{{toddler.happy}}</td>
        </tr>
      </table>
    </div>
  </body>

</html>
// Instantiate the app, the 'myApp' parameter must 
// match what is in ng-app
var myApp = angular.module('myApp', []);

// Create the controller, the 'ToddlerCtrl' parameter 
// must match an ng-controller directive
myApp.controller('ToddlerCtrl', function ($scope) {
  
  // Define an array of Toddler objects
  $scope.toddlers = [
    {
      "name": "Toddler One",
      "birthday": "1/1/2011",
      "happy": true
    },
    {
      "name": "Toddler Two",
      "birthday": "2/2/2011",
      "happy": true
    },
    {
      "name": "Toddler Three",
      "birthday": "3/3/2011",
      "happy": false
    }
  ];
  
});
body {
  font-size: 24px;
}