<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "x-ua-compatible" content= "Ie=edge"/>
<meta name= "viewport" content= "width=device-width,initial-scale=1"/>
<title>todolist</title>
<meta charset= "Utf-8"/>
<link rel= "stylesheet" href= "Bootstrap-3.3.5/dist/css/bootstrap.min.css"/>
<body data-ng-app= "Taskapp" data-ng-controller= "Taskctrl" >
<div class= "Container" style= "padding:50px" >
<div class= "Input-group" >
<input type= "text" class= "Form-control" data-ng-model= "task"/>
<span class= "INPUT-GROUP-BTN" >
<button class= "btn btn-default" data-ng-click= "Add ()" > Submit </button>
</span>
</div>
<ul class= "List-group" >
<li class= "List-group-item" data-ng-repeat= "item in the tasks track by $index" >{{item}}<a data-ng-click= " Tasks.splice ($index, 1) "> Delete </a></li>
</ul>
</div>
<script src= "Jquery/jquery-2.1.4.js" ></script>
<script src= "Bootstrap-3.3.5/dist/js/bootstrap.min.js" ></script>
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ></script>
<script>
Angular.module ("Taskapp", []). Controller ("Taskctrl", function ($scope) {
$scope. Task = "";
$scope. tasks = [];
$scope. Add = function () {
$scope. Tasks.push ($scope. Task)
}
})
</script>
</body>
AngularJS Web Application