Edit in JSFiddle

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: