Untitled

<!DOCTYPE html>
<html ng-app='exampleApp'>
  <head>
    <meta charset="utf-8">
    <title>TP</title>

    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-theme.css">

    <script src="../node_modules/angular/angular.js" charset="utf-8"></script>

    <script type="text/javascript" src="js/app.js"></script>

  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12" ng-controller="todoCtrl as ctrl">
          todo : {{(ctrl.todos|filter:{done:false}).length}}
          <table class="table" >
            <tr>
              <th>Name</th>
              <th>done</th>
            </tr>

            <tr ng-repeat="todo in ctrl.todos">
              <td>{{todo.name}}</td>
              <td>{{todo.done}}</td>
            </tr>
          </table>
        </div>
      </div>

    </div>

  </body>
</html>


var app = angular.module('exampleApp',[]);

var todos = [
  {"name":"Todo 1","done":false},
  {"name":"Todo 2","done":true},
  {"name":"Todo 3","done":true},
  {"name":"Todo 4","done":false},
  {"name":"Todo 5","done":true},
  {"name":"Todo 6","done":false},
  {"name":"Todo 7","done":true},
  {"name":"Todo 8","done":false},
  {"name":"Todo 9","done":true}
];

app.value("todos",todos);

app.controller('todoCtrl',function(todos){
  this.todos = todos;
});