var todoListApp = angular.module('todolist');
todoListApp.service("tasksService", function () {
    var tasks = [];
					
    this.add = function (task) {
        tasks.push(task);
    };
					
    this.remove = function (index) {
        tasks.splice(index, 1);
    };
					
    this.done = function (task) {
        task.isDone = true;
    };

    this.getTasks = function () {
        return tasks;
    };
});

var todoListApp = angular.module('todolist');
todoListApp.controller('mainController', function ($scope, tasksService) {
    $scope.tasks = tasksService.getTasks();
    $scope.taskTitle = "";

    $scope.addTask = function () {
        if (!$scope.taskTitle)
            return;
        var task = {
            isDone: false,
            title: $scope.taskTitle
        };
        tasksService.add(task);
        $scope.taskTitle = "";
    };
						
    $scope.removeTask = function (index) {
        tasksService.remove(index);
    };
						
    $scope.doneTask = function (task) {
        tasksService.done(task);
    };
}); 

<html ng-app="todolist">
<head>
	<meta charset="utf-8" />
	<title>Todo List</title>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
</head>
<body ng-controller="mainController">
	<span>Nouvelle tâche : </span><input type="text" ng-model="taskTitle"><button ng-click="addTask()">+</button>
	<ul ng-repeat="task in tasks">
		<li>
			<span ng-class="{isDone: task.isDone}">{{task.title}}</span>
			<button ng-click="$parent.doneTask(task)" ng-show="!task.isDone">Done</button>
			<button ng-click="$parent.removeTask($index)">Remove</button>
		</li>
	</ul>

	<script src="js/app.js"></script>
	<script src="js/controllers/MainController.js"></script>
	<script src="js/services/TasksService.js"></script>
</body>
</html>