gajus/gist:c1be46226fff01736038

## gistfile1.html
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <title>First Test</title>
    <script src="../angular.js"></script>
    <script src="./todo.js"></script>

    <style>
    .warning { color: #f00; }
    .success { color: #0f0; }
    </style>
</head>
<body ng-controller="TodoController">
    <h1 ng-class="warningLevel()">{{todo.user}}'s To Do List <span ng-hide="incompleteCount() == 0">({{incompleteCount()}})</span></h1>

    <form>
        <input ng-model="actionText">
        <button ng-click="addNewItem(actionText)">Add</button>

        <label>
            Show complete?

            <input type="checkbox" ng-model="showComplete">
        </label>
    </form>

    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Done?</th>
                <th>Done?</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in todo.items | checkedItems: showComplete | orderBy: 'action'">
                <td>{{item.name}}</td>
                <td><input type="checkbox" ng-model="item.done"></td>
                <td>{{item.done}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

## gistfile2.js
var todoApp;

todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function ($scope) {
    $scope.todo = {
        user: 'Adam',
        items: [
            {name: 'Get the book', done: true},
            {name: 'Finish reading the book', done: false},
            {name: 'Summarize the book', done: false}
        ]
    };

    $scope.incompleteCount = function () {
        return $scope.todo.items.filter(function (item) {
            return !item.done;
        }).length;
    };

    $scope.warningLevel = function () {
        return $scope.incompleteCount() > 2 ? 'warning' : 'success';
    };

    $scope.addNewItem = function (actionText) {
        return $scope.todo.items.push({
            name: actionText,
            done: false
        });
    };
});

todoApp.filter('checkedItems', function () {
    return function (items, showComplete) {
        var resultItems = [];
        angular.forEach(items, function (item) {
            if (item.done === false || showComplete === true) {
                resultItems.push(item);
            }
        });
        return resultItems;
    };
});
	<!DOCTYPE html>
	<html ng-app="todoApp">
	<head>
	<title>First Test</title>
	<script src="../angular.js"></script>
	<script src="./todo.js"></script>

	<style>
	.warning { color: #f00; }
	.success { color: #0f0; }
	</style>
	</head>
	<body ng-controller="TodoController">
	<h1 ng-class="warningLevel()">{{todo.user}}'s To Do List <span ng-hide="incompleteCount() == 0">({{incompleteCount()}})</span></h1>

	<form>
	<input ng-model="actionText">
	<button ng-click="addNewItem(actionText)">Add</button>

	<label>
	Show complete?

	<input type="checkbox" ng-model="showComplete">
	</label>
	</form>

	<table>
	<thead>
	<tr>
	<th>Name</th>
	<th>Done?</th>
	<th>Done?</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="item in todo.items \| checkedItems: showComplete \| orderBy: 'action'">
	<td>{{item.name}}</td>
	<td><input type="checkbox" ng-model="item.done"></td>
	<td>{{item.done}}</td>
	</tr>
	</tbody>
	</table>
	</body>
	</html>
	var todoApp;

	todoApp = angular.module('todoApp', []);

	todoApp.controller('TodoController', function ($scope) {
	$scope.todo = {
	user: 'Adam',
	items: [
	{name: 'Get the book', done: true},
	{name: 'Finish reading the book', done: false},
	{name: 'Summarize the book', done: false}
	]
	};

	$scope.incompleteCount = function () {
	return $scope.todo.items.filter(function (item) {
	return !item.done;
	}).length;
	};

	$scope.warningLevel = function () {
	return $scope.incompleteCount() > 2 ? 'warning' : 'success';
	};

	$scope.addNewItem = function (actionText) {
	return $scope.todo.items.push({
	name: actionText,
	done: false
	});
	};
	});

	todoApp.filter('checkedItems', function () {
	return function (items, showComplete) {
	var resultItems = [];
	angular.forEach(items, function (item) {
	if (item.done === false \|\| showComplete === true) {
	resultItems.push(item);
	}
	});
	return resultItems;
	};
	});