Step 3

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

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="deck.js"></script>
    <script src="deckController.js"></script>
  </head>

  <body>
    <h1>Favorite cards</h1>
    
    <div ng-controller="deckController">
    
      <ul>
        <li ng-repeat="card in deck">
          {{ card.name }} ({{card.cost}})<br>
          <em>{{ card.comment }}</em>
          <br>
          <input type="text" ng-model="card.comment" placeholder="Comment">
        </li>
      </ul>
      
      
      <pre>{{deck}}</pre>
    </div>
    
  </body>

</html>

app = angular.module("app", []);
// We'll explain modules later.
// See it as a container for angular object's at this time.

/* Styles go here */

deck = [
  {
    name: "Snapcaster mage",
    cost: "1U",
    type: "creature",
    strength: "2",
    toughness: "1",
    rarity: "rare"
  }
  ,
  {
    name: "Augure of Bolas",
    cost: "1U",
    type: "creature",
    strength: "1",
    toughness: "3",
    rarity: "uncommon"
  }
  ,
  {
    name: "Supreme Verdict",
    cost: "1WWU",
    type: "sorcery",
    rarity: "rare"
  }
  ,
  {
    name: "Elspeth, Sun's Champion",
    cost: "4WW",
    type: "planeswalker",
    rarity: "mythic rare"
  }
  ,
  {
    name: "Restoration Angel",
    cost: "3W",
    type: "creature",
    strength: "3",
    toughness: "4",
    rarity: "rare"
  }
];

app.controller('deckController',
  function($scope) {
    $scope.deck = deck;
  }
);