November 2, 2013 07:13 · Nov 2, 2013
diff --git a/jsbin.IkAxaLa.css b/jsbin.IkAxaLa.css
@@ -0,0 +1,4 @@
+.done-true {
+    text-decoration: line-through;
+    color: grey;
+}
diff --git a/jsbin.IkAxaLa.html b/jsbin.IkAxaLa.html
@@ -0,0 +1,24 @@
+<!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>
diff --git a/jsbin.IkAxaLa.js b/jsbin.IkAxaLa.js
@@ -0,0 +1,26 @@
+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);
+        });
+    };
+}