LI3 Angular Pres

<div ng:controller="PersistentTodosController">

  <ul class="todos">
    <li ng:repeat="item in todos">
      <input type="checkbox" ng:model="item.completed" />

      <label
        ng:class="{ completed: item.completed }"
        ng:click="todos.remove($index)"
      >{{ item.title }}</label>

    </li>
    <li ng:show="todos.isEmpty()">
      <em>Add to-do items below</em>
    </li>
  </ul>

  <form ng:submit="todos.add({ title: newTodo }); newTodo = ''">
    <input type="text" ng:model="newTodo" />
  </form>
</div>

<script type="text/javascript">
  app.controller("PersistentTodosController", function($scope, $resource) {
    var Todo = $resource("/todos/:id", { id: '@_id' });

    $scope.todos = $.extend(Todo.query(), {
      add: function(data) {
        var list = this,
          todo = new Todo($.extend(data, { completed: false }));

        todo.$save(function() { list.push(todo); });
      },
      remove: function(index) {
        var todo = this.splice(index, 1)[0];
        todo.$delete();
      },
      isEmpty: function() {
        return this.length === 0;
      },
      isFilled: function() {
        return this.length >= 3;
      }
    });
  });
</script>