function TodoCtrl($scope) {
$scope.todos = [];
$scope.filterCriteria = {};
$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.isDone = function(done) {
return done ? " (Done!)" : "";
};
}
<section ng-app>
<div id="new-status" ng-controller="TodoCtrl">
<h1>Todo ({{ remaining() }} left)</h1>
<div>
<a href="#" ng-click="filterCriteria = {};">all</a>
<a href="#" ng-click="filterCriteria.done = true;">done</a>
<a href="#" ng-click="filterCriteria.done = false;">not done</a>
</div>
<form ng-submit="addTodo()">
<textarea id="new-status" ng-model="todoText"></textarea>
<button type="submit">Add</button>
</form>
<ul id="statuses">
<li ng-repeat="todo in todos | orderBy:'text' | filter:filterCriteria">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}} {{ isDone(todo.done) }}</span>
</li>
</ul>
</div>
</section>
External resources loaded into this fiddle: