	<!DOCTYPE html>
<html ng-app="todoapp">
<head>
	<title>TodoApp</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
	<style type="text/css">
		.done {
			text-decoration: line-through;
			color:#ccc;
		}
		small {
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="container" ng-controller="TodoCtrl">
		<h1>Todo List App</h1>
		<table class="table">
			<thead>
				<tr>
					<th>Tasks</th>
					<th>Details</th>
					<th>Actions</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="text" class="form-control" ng-model="task.taskname" required></td>
					<td><textarea ng-model="task.details" required></textarea></td>
					<td><button class="btn btn-primary" ng-click="addTask()">Add Task</button></td>
				</tr>
				<tr ng-repeat="todo in todolist">
					<!--<td><input type="checkbox" ng-model="todo.done">&nbsp;&nbsp;
					<span ng-class="{'done':todo.done}">{{todo.taskname}}</span>-->
					<td colspan="3">
					<span ng-click="DeleteTask">x</span>
						<input type="checkbox" ng-model="todo.Done" ng-checked="todo.Done" ng-click="markTaskDone()">&nbsp;&nbsp;
						<span ng-class="(todo.Done==true)? 'done':''">{{todo.taskname}}</span> <small ng-click="more=!more" ng-show="todo.details"> {{(more)? 'Hide Desc' : 'Show Desc'}}</small><br />
						<small ng-show="more==true">{{todo.details}}</small>
					</td>


				</tr>
			</tbody>
		</table>
		
	</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>

<!--ng-change="markTaskDone()" -->