/jsbin.IkAxaLa.css

## jsbin.IkAxaLa.css
.done-true {
    text-decoration: line-through;
    color: grey;
}

## jsbin.IkAxaLa.html
<!DOCTYPE html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
    <h2>Todo</h2>
    <div ng-controller="TodoCtrl">
        <span>{{remaining()}} of {{todos.length}} remaining</span>
        [ <a href="" ng-click="archive()">archive</a> ]
        <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 ng-submit="addTodo()">
            <input type="text" ng-model="todoText" size="30"
                placeholder="add new todo here">
            <input class="btn-primary" type="submit" value="add">
        </form>
    </div>
</body>
</html>

## jsbin.IkAxaLa.js
function TodoCtrl($scope) {
    $scope.todos = [
        {text:'learn angular', done:true},
        {text:'build an angular app', done:false}];

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

    $scope.remaining = function() {
        var count = 0;
        angular.forEach($scope.todos, function(todo) {
            count += todo.done ? 0 : 1;
        });
        return count;
    };

    $scope.archive = function() {
        var oldTodos = $scope.todos;
        $scope.todos = [];
        angular.forEach(oldTodos, function(todo) {
            if (!todo.done) $scope.todos.push(todo);
        });
    };
}
	<!DOCTYPE html>
	<html ng-app>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
	</head>
	<body>
	<h2>Todo</h2>
	<div ng-controller="TodoCtrl">
	<span>{{remaining()}} of {{todos.length}} remaining</span>
	[ <a href="" ng-click="archive()">archive</a> ]
	<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 ng-submit="addTodo()">
	<input type="text" ng-model="todoText" size="30"
	placeholder="add new todo here">
	<input class="btn-primary" type="submit" value="add">
	</form>
	</div>
	</body>
	</html>
	function TodoCtrl($scope) {
	$scope.todos = [
	{text:'learn angular', done:true},
	{text:'build an angular app', done:false}];

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

	$scope.remaining = function() {
	var count = 0;
	angular.forEach($scope.todos, function(todo) {
	count += todo.done ? 0 : 1;
	});
	return count;
	};

	$scope.archive = function() {
	var oldTodos = $scope.todos;
	$scope.todos = [];
	angular.forEach(oldTodos, function(todo) {
	if (!todo.done) $scope.todos.push(todo);
	});
	};
	}