2_ShoppingList/index.html

<!doctype html>
<html lang="en">
  <head>
    <title>Shopping List Check Off</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="styles/bootstrap.min.css">
    <style>
      .emptyMessage {
        font-weight: bold;
        color: red;
        font-size: 1.2em;
      }
      li {
        margin-bottom: 7px;
        font-size: 1.2em;
      }
      li > button {
        margin-left: 6px;
      }
      button > span {
        color: green;
      }
    </style>
  </head>
<body ng-app="ShoppingListApp">
  <div class="container">
  <h1>Shopping List Check Off</h1>

  <div class="row">

    <!-- To Buy List -->
    <div class="col-md-6" ng-controller="BuyItemsListController as buyItemsList">
     <h2>To Buy:</h2>
     <ul ng-repeat="item in buyItemsList.items">
       <li>Buy {{item.quantity}} {{item.name}}{{item.quantity | AddPluralExtension}}
        <button class="btn btn-default" ng-click="buyItemsList.buyItem($index);"><span class="glyphicon glyphicon-ok"></span> Bought</button></li>
     </ul>
     <div class="emptyMessage" ng-if="buyItemsList.items.length === 0">Everything is bought!</div>
    </div>

    <!-- Already Bought List -->
    <div class="col-md-6" ng-controller="BoughtItemsListController as boughtItemsList">
     <h2>Already Bought:</h2>
     <ul ng-repeat="item in boughtItemsList.items">
       <li>Bought {{item.quantity}} {{item.name}}{{item.quantity | AddPluralExtension}}</li>
     </ul>
     <div class="emptyMessage" ng-if="boughtItemsList.items.length === 0">Nothing bought yet.</div>
    </div>
  </div>
</div>

</body>
</html>