/index.html

## index.html
<!doctype html>
<html ng-app>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="todo.js"></script>
        <link rel="stylesheet" href="todo.css">
    </head>

    <body>
         <h2>To</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>

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

## todo.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>
	<script src="todo.js"></script>
	<link rel="stylesheet" href="todo.css">
	</head>

	<body>
	<h2>To</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);
	});
	};
	}