tabekg/index.html

## index.html
<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="utf-8">
		<title>Simple AngularJS todo list</title>
		<style type="text/css">
			a[ng-click] {
				cursor: pointer;
				color: lime;
			}
		</style>
	</head>
	<body ng-controller="MainCtrl">
		<h1>Simple todo list</h1>

		<h2>Add a task</h2>
		<form ng-submit="addTask()">
			<input type="text" placeholder="New task title" ng-model="newTask" />
			<input type="submit" ng-show="newTask.length" value="Add task">
		</form>

		<div ng-show="tasks.length">
			<h2>Tasks {{ tasks.length }} [<a ng-click="clear()">clear</a>]</h2>
			<ul>
				<li ng-repeat="(index, task) in tasks">{{ task.title }}<span ng-show="!task.completed"> [<a ng-click="completeTask(index)">completed</a>]</span></li>
			</ul>
		</div>

		<div ng-show="completed.length">
			<h2>Completed tasks {{ completed.length }}</h2>
			<ul>
				<li ng-repeat="(index, task) in completed">{{ task.title }} [<a ng-click="removeTask(index)">remove</a>]</li>
			</ul>
		</div>

		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
		<script type="text/javascript" src="scripts.js"></script>
	</body>
</html>

## scripts.js
var app = angular.module('app', []);

app.controller('MainCtrl', ['$scope', function($scope){
	$scope.tasks = [];
	$scope.completed = [];
	$scope.newTask = '';

	$scope.addTask = function(){
		if (angular.equals($scope.newTask, '')) return false;
		$scope.tasks.push({
			title: $scope.newTask,
			completed: false
		});
		$scope.newTask = '';
	}

	$scope.removeTask = function(task){
		$scope.completed.splice(task, 1);
	}

	$scope.completeTask = function(task){
		$scope.completed.push($scope.tasks[task]);
		$scope.tasks.splice(task, 1);
	}

	$scope.clear = function(){
		$scope.tasks = [];
		$scope.completed = [];
	}
}]);
	<!DOCTYPE html>
	<html ng-app="app">
	<head>
	<meta charset="utf-8">
	<title>Simple AngularJS todo list</title>
	<style type="text/css">
	a[ng-click] {
	cursor: pointer;
	color: lime;
	}
	</style>
	</head>
	<body ng-controller="MainCtrl">
	<h1>Simple todo list</h1>

	<h2>Add a task</h2>
	<form ng-submit="addTask()">
	<input type="text" placeholder="New task title" ng-model="newTask" />
	<input type="submit" ng-show="newTask.length" value="Add task">
	</form>

	<div ng-show="tasks.length">
	<h2>Tasks {{ tasks.length }} [<a ng-click="clear()">clear</a>]</h2>
	<ul>
	<li ng-repeat="(index, task) in tasks">{{ task.title }}<span ng-show="!task.completed"> [<a ng-click="completeTask(index)">completed</a>]</span></li>
	</ul>
	</div>

	<div ng-show="completed.length">
	<h2>Completed tasks {{ completed.length }}</h2>
	<ul>
	<li ng-repeat="(index, task) in completed">{{ task.title }} [<a ng-click="removeTask(index)">remove</a>]</li>
	</ul>
	</div>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
	<script type="text/javascript" src="scripts.js"></script>
	</body>
	</html>
	var app = angular.module('app', []);

	app.controller('MainCtrl', ['$scope', function($scope){
	$scope.tasks = [];
	$scope.completed = [];
	$scope.newTask = '';

	$scope.addTask = function(){
	if (angular.equals($scope.newTask, '')) return false;
	$scope.tasks.push({
	title: $scope.newTask,
	completed: false
	});
	$scope.newTask = '';
	}

	$scope.removeTask = function(task){
	$scope.completed.splice(task, 1);
	}

	$scope.completeTask = function(task){
	$scope.completed.push($scope.tasks[task]);
	$scope.tasks.splice(task, 1);
	}

	$scope.clear = function(){
	$scope.tasks = [];
	$scope.completed = [];
	}
	}]);