<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app='toDoList' ng-controller='toDoListCtrl'>
 <!-- ng-controller is a brain of our application.
  It will hold logics required by the application
  -->


  <!--ng-repeat will loop through the taskList -->
  <div ng-repeat='task in taskList'>
    <!-- A checkbox displaying the progress -->
    <input type='checkbox' ng-model='task.done' />
    <!-- An information of a task -->
    <span ng-class='{done: task.done}'>{{task.task}}</span>
  </div>
<div class='input-form'>
  <input type='text' ng-model='newTask' />
  <button ng-click='addTask(newTask)'>Add</button>
</div>



</body>

</html>
//We have to define our application first
angular.module("toDoList", [])

/*Controller is like a brain of our app. It contain models and logics required
  to operate our to do list.
*/
  .controller("toDoListCtrl", ['$scope',
    function($scope) {
      //A model holding tasks
      $scope.taskList = [
        {done: true,
        task: 'Do nothing'
      },
        {
          done: false,
          task: 'Show some tasks'
        },
        {
          done: false,
          task: 'Add a task'
        },
        {
        done: false,
        task: 'Walk the dog'
      }
      ];

    //Function for adding task to the task list
      $scope.addTask = function(task) {
        
        //I'm pushing a new task to the task list
        $scope.taskList.push({
          done: false,
          task: task
        });
      };
 
    }
  ]);
body
{
  background-color: #98CC4B;
}

.done
{
  text-decoration: line-through;
}

.input-form
{
  border-top: dashed 1px;
  padding-top: 1em;
}
Simple to do list with Angularjs.