<!DOCTYPE html>

<html>
  <head>
    <title>Angular TODO</title>
      <link rel="stylesheet" href="app.css">
  </head>

  <body ng-app="app">

    <h1> Angular Todo </h1>
    <div ng-controller="counterController as counterController">
      <button ng-click="counterController.add()"> + </button>
      <button ng-click="counterController.sub()"> - </button>
      <span ng-bind="counterController.counter"></span>
    </div>
  </br></br>


    <div ng-controller= "todoController as todoController">
      <input ng-model="todoController.newTask"></input>
      <button ng-click= "todoController.add()"> Add Task </button>
      <span ng-bind-template= "{{todoController.completed}} / {{todoController.total}} complete"></span>
      <h2> Your Task List </h2>

      <ul ng-repeat="task in todoController.tasks">
        <li ng-class= "{'strikethrough': task.complete }"ng-click="todoController.complete($index)" ng-bind-template= "{{task.name}}">  </li>
      </ul>
    </div>

    <script src="./bower_components/angular/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
  </body>
</html>

<!DOCTYPE html>

<html>
  <head>
    <title>Angular TODO</title>
      <link rel="stylesheet" href="app.css">
  </head>

  <body ng-app="app">

    <h1> Angular Todo </h1>
    <div ng-controller="counterController as counterController">
      <button ng-click="counterController.add()"> + </button>
      <button ng-click="counterController.sub()"> - </button>
      <span ng-bind="counterController.counter"></span>
    </div>
  </br></br>


    <div ng-controller= "todoController as todoController">
      <input ng-model="todoController.newTask"></input>
      <button ng-click= "todoController.add()"> Add Task </button>
      <span ng-bind-template= "{{todoController.completed}} / {{todoController.total}} complete"></span>
      <h2> Your Task List </h2>

      <ul ng-repeat="task in todoController.tasks">
        <li ng-class= "{'strikethrough': task.complete }"ng-click="todoController.complete($index)" ng-bind-template= "{{task.name}}">  </li>
      </ul>
        <button ng-click= "todoController.add()"> Show Completed </button>
    </div>

    <script src="./bower_components/angular/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
  </body>
</html>

Add Show/Hide completed toggle button
Add Show/Hide completed toggle button
