angular

angular

HTML

<script src="https://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body ng-app>
<div ng-controller="TodoCtrl">
    <h2>Total todos: {{getTotalTodos()}}</h2>
    <ul class="unstyled">
        <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done">
            <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>
    </ul>
    <form class="form-horizontal">
        <input type="text" ng-model="formTodoText" ng-model-instant>
        <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
    </form>

    <button class="btn-large" ng-click="clearCompleted()"><i class="icon-trash"></i>Clear Completed</button>
</div>
</body>

CSS

.done-true{
    text-decoration: line-through;
    color: grey;
}

JavaScript

function TodoCtrl($scope) {
    $scope.todos = [
        {text:'Learn AngularJS', done:false},
        {text:'Build an app', done:false}
    ];

    $scope.getTotalTodos = function () {
        return $scope.todos.length;
    };

    $scope.clearCompleted = function () {
    console.log("test");
        $scope.todos = _.filter($scope.todos, function(todo){
            return !todo.done;
        });
    };

    $scope.addTodo = function () {
        $scope.todos.push({text:$scope.formTodoText, done:false});
        $scope.formTodoText = '';
    };
}