ishaadX/index.html

## index.html
<!doctype html>
<html ng-app>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
	<script src="http://www.parsecdn.com/js/parse-1.2.7.min.js"></script>
	<script src="todo.js"></script>
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
	<div class="container" ng-controller="Todo">
		<div class="span4">
		<h1>Todo HelsinkiJS</h1>
		<div class="progress">
 			 	<span ng-hide="todos.length">Go ahead and add some tasks!</span>
 			 <div class="bar bar-success" style="width: {{donePercentage()}}%;">
 			 	<span ng-show="todos.length">
 			 		<span ng-hide="todosOpen()">Everything done!</span>
 			 		<span ng-show="todosOpen()">{{donePercentage()}}%</span>
 			 	</span>
 			 </div>
		</div>
		<div ng-show="todos.length">
			<h3>Todo</h3>
		</div>
		<ul class="unstyled">
			<li ng-repeat="todo in todos | filter:{done: false}">
				<div class="controls form-inline">
					<input id="todo{{$index}}" type="checkbox" ng-change="updateTodo(todo)" ng-model="todo.done"/>
					<label for="todo{{$index}}">{{todo.text}}</label>
				</div>
			</li>
		</ul>
		<div>
		<form ng-submit="addTodo()">
			<div class="input-append">
				<input type="text" ng-model="inputTodo">
				<input class="btn btn-primary" type="submit" value="add">
			</div>
		</form>
		<h3 ng-show="todosDone">Completed</h3>
			<button ng-show="todosDone" class="btn btn-small btn-danger" ng-click="todoClear()">Clear completed</button>
		<ul class="unstyled">
			<li ng-repeat="todo in todos | filter:{done: true}">
				<div class="controls form-inline">
					<input id="done{{$index}}" type="checkbox" ng-change="updateTodo(todo)" ng-model="todo.done"/>
					<label for="done{{$index}}">{{todo.text}}</span>
				</div>
			</li>
		</ul>
		</div>
		</div>
	</div>
</body>
</html>

## todo.js
function Todo($scope) {

  // Put in your Parse Application keys
	Parse.initialize("Application ID Key", "Javascript Key");
	var TodoItem = Parse.Object.extend("TodoItem");

	$scope.todos = [];

	$scope.todosDone = 0;
	$scope.todosOpen = function() {
		return $scope.todos.length - $scope.todosDone;
	};


	$scope.updateTodo = function(todo) {
		if(todo.done) {
			$scope.todosDone++;
		} else {
			$scope.todosDone--;
		}
		todo.parseObj.set("done", todo.done);
		todo.parseObj.save();
	}

	$scope.addTodo = function() {
		var newTodo = {text: $scope.inputTodo, done:false};
		$scope.todos.push(newTodo);

		var todoItem = new TodoItem();
		todoItem.save(newTodo, {
			success: function(obj) {
				newTodo.parseObj = obj;
			}
		})

		$scope.inputTodo = '';
	}

	$scope.todoClear = function() {
		// Clears completed
		$scope.todosDone = 0;
		var oldTodos = $scope.todos;
		$scope.todos = [];
		angular.forEach(oldTodos, function(todo) {
			if(!todo.done) {
				$scope.todos.push(todo);
			} else {
				todo.parseObj.destroy();
			}
		});
	};

	$scope.donePercentage = function() {
		return Math.round($scope.todosDone / $scope.todos.length * 100)
	}


	// Querying Parse on load
	var query = new Parse.Query(TodoItem);
	query.find({
		success: function(results) {
			$scope.$apply(function () {
				console.log(results.length);
				for(var i = 0; i < results.length; i++) {
					$scope.todos.push({
						text: results[i].get('text'),
						done: results[i].get('done'),
						parseObj: results[i]
					});
					if(results[i].get('done'))  {
						$scope.todosDone++;
					}
				}
			});
		}
	});
}
	<!doctype html>
	<html ng-app>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
	<script src="http://www.parsecdn.com/js/parse-1.2.7.min.js"></script>
	<script src="todo.js"></script>
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
	</head>
	<body>
	<div class="container" ng-controller="Todo">
	<div class="span4">
	<h1>Todo HelsinkiJS</h1>
	<div class="progress">
	<span ng-hide="todos.length">Go ahead and add some tasks!</span>
	<div class="bar bar-success" style="width: {{donePercentage()}}%;">
	<span ng-show="todos.length">
	<span ng-hide="todosOpen()">Everything done!</span>
	<span ng-show="todosOpen()">{{donePercentage()}}%</span>
	</span>
	</div>
	</div>
	<div ng-show="todos.length">
	<h3>Todo</h3>
	</div>
	<ul class="unstyled">
	<li ng-repeat="todo in todos \| filter:{done: false}">
	<div class="controls form-inline">
	<input id="todo{{$index}}" type="checkbox" ng-change="updateTodo(todo)" ng-model="todo.done"/>
	<label for="todo{{$index}}">{{todo.text}}</label>
	</div>
	</li>
	</ul>
	<div>
	<form ng-submit="addTodo()">
	<div class="input-append">
	<input type="text" ng-model="inputTodo">
	<input class="btn btn-primary" type="submit" value="add">
	</div>
	</form>
	<h3 ng-show="todosDone">Completed</h3>
	<button ng-show="todosDone" class="btn btn-small btn-danger" ng-click="todoClear()">Clear completed</button>
	<ul class="unstyled">
	<li ng-repeat="todo in todos \| filter:{done: true}">
	<div class="controls form-inline">
	<input id="done{{$index}}" type="checkbox" ng-change="updateTodo(todo)" ng-model="todo.done"/>
	<label for="done{{$index}}">{{todo.text}}</span>
	</div>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</body>
	</html>
	function Todo($scope) {

	// Put in your Parse Application keys
	Parse.initialize("Application ID Key", "Javascript Key");
	var TodoItem = Parse.Object.extend("TodoItem");

	$scope.todos = [];

	$scope.todosDone = 0;
	$scope.todosOpen = function() {
	return $scope.todos.length - $scope.todosDone;
	};



	$scope.updateTodo = function(todo) {
	if(todo.done) {
	$scope.todosDone++;
	} else {
	$scope.todosDone--;
	}
	todo.parseObj.set("done", todo.done);
	todo.parseObj.save();
	}

	$scope.addTodo = function() {
	var newTodo = {text: $scope.inputTodo, done:false};
	$scope.todos.push(newTodo);

	var todoItem = new TodoItem();
	todoItem.save(newTodo, {
	success: function(obj) {
	newTodo.parseObj = obj;
	}
	})

	$scope.inputTodo = '';
	}

	$scope.todoClear = function() {
	// Clears completed
	$scope.todosDone = 0;
	var oldTodos = $scope.todos;
	$scope.todos = [];
	angular.forEach(oldTodos, function(todo) {
	if(!todo.done) {
	$scope.todos.push(todo);
	} else {
	todo.parseObj.destroy();
	}
	});
	};

	$scope.donePercentage = function() {
	return Math.round($scope.todosDone / $scope.todos.length * 100)
	}


	// Querying Parse on load
	var query = new Parse.Query(TodoItem);
	query.find({
	success: function(results) {
	$scope.$apply(function () {
	console.log(results.length);
	for(var i = 0; i < results.length; i++) {
	$scope.todos.push({
	text: results[i].get('text'),
	done: results[i].get('done'),
	parseObj: results[i]
	});
	if(results[i].get('done')) {
	$scope.todosDone++;
	}
	}
	});
	}
	});
	}