LuisMDeveloper/index.html

## index.html
<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.done-true {
  text-decoration: line-through;
  color: grey;
}
.unstyled {

}
</style>
</head>
<body>
  <div class="container">
    <h1>ToDo List</h1>
    <div class="row">
      <div class="col-md-4">
        <div ng-controller="TodoListController as todoList">
      <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
      [ <a href="" ng-click="todoList.archive()">archive</a> ]
      <ul class="list-unstyled">
        <li ng-repeat="todo in todoList.todos">
          <label for="checkbox">
            <input type="checkbox" ng-model="todo.done">
            <span class="done-{{todo.done}}">{{todo.text}}</span>
          </label>
        </li>
      </ul>
      <form ng-submit="todoList.addTodo()">
        <input class="form-control" type="text" ng-model="todoList.todoText" size="30"
               placeholder="add new todo here">
        <br>
        <input class="btn btn-primary btn-block" type="submit" value="add">
      </form>
    </div>
      </div>
    </div>

  </div>
<script id="jsbin-javascript">
angular.module('App', [])
.controller('TodoListController', function() {

  var todoList = this;

  todoList.todos = [
      {text:'learn angular', done:true},
      {text:'build an angular app', done:false}];

  todoList.addTodo = function() {
    todoList.todos.push({text:todoList.todoText, done:false});
    todoList.todoText = '';
  };

  todoList.remaining = function() {
    var count = 0;
    angular.forEach(todoList.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  todoList.archive = function() {
    var oldTodos = todoList.todos;
    todoList.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) todoList.todos.push(todo);
    });
  };

});
</script>


<script id="jsbin-source-css" type="text/css">.done-true {
  text-decoration: line-through;
  color: grey;
}
.unstyled {

}</script>

<script id="jsbin-source-javascript" type="text/javascript">angular.module('App', [])
.controller('TodoListController', function() {

  var todoList = this;

  todoList.todos = [
      {text:'learn angular', done:true},
      {text:'build an angular app', done:false}];

  todoList.addTodo = function() {
    todoList.todos.push({text:todoList.todoText, done:false});
    todoList.todoText = '';
  };

  todoList.remaining = function() {
    var count = 0;
    angular.forEach(todoList.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  todoList.archive = function() {
    var oldTodos = todoList.todos;
    todoList.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) todoList.todos.push(todo);
    });
  };

});</script></body>
</html>

## jsbin.fusato.css
.done-true {
  text-decoration: line-through;
  color: grey;
}
.unstyled {

}

## jsbin.fusato.js
angular.module('App', [])
.controller('TodoListController', function() {

  var todoList = this;

  todoList.todos = [
      {text:'learn angular', done:true},
      {text:'build an angular app', done:false}];

  todoList.addTodo = function() {
    todoList.todos.push({text:todoList.todoText, done:false});
    todoList.todoText = '';
  };

  todoList.remaining = function() {
    var count = 0;
    angular.forEach(todoList.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  todoList.archive = function() {
    var oldTodos = todoList.todos;
    todoList.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) todoList.todos.push(todo);
    });
  };

});
	<!DOCTYPE html>
	<html ng-app="App">
	<head>
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.done-true {
	text-decoration: line-through;
	color: grey;
	}
	.unstyled {

	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>ToDo List</h1>
	<div class="row">
	<div class="col-md-4">
	<div ng-controller="TodoListController as todoList">
	<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
	[ <a href="" ng-click="todoList.archive()">archive</a> ]
	<ul class="list-unstyled">
	<li ng-repeat="todo in todoList.todos">
	<label for="checkbox">
	<input type="checkbox" ng-model="todo.done">
	<span class="done-{{todo.done}}">{{todo.text}}</span>
	</label>
	</li>
	</ul>
	<form ng-submit="todoList.addTodo()">
	<input class="form-control" type="text" ng-model="todoList.todoText" size="30"
	placeholder="add new todo here">
	<br>
	<input class="btn btn-primary btn-block" type="submit" value="add">
	</form>
	</div>
	</div>
	</div>

	</div>
	<script id="jsbin-javascript">
	angular.module('App', [])
	.controller('TodoListController', function() {

	var todoList = this;

	todoList.todos = [
	{text:'learn angular', done:true},
	{text:'build an angular app', done:false}];

	todoList.addTodo = function() {
	todoList.todos.push({text:todoList.todoText, done:false});
	todoList.todoText = '';
	};

	todoList.remaining = function() {
	var count = 0;
	angular.forEach(todoList.todos, function(todo) {
	count += todo.done ? 0 : 1;
	});
	return count;
	};

	todoList.archive = function() {
	var oldTodos = todoList.todos;
	todoList.todos = [];
	angular.forEach(oldTodos, function(todo) {
	if (!todo.done) todoList.todos.push(todo);
	});
	};

	});
	</script>


	<script id="jsbin-source-css" type="text/css">.done-true {
	text-decoration: line-through;
	color: grey;
	}
	.unstyled {

	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">angular.module('App', [])
	.controller('TodoListController', function() {

	var todoList = this;

	todoList.todos = [
	{text:'learn angular', done:true},
	{text:'build an angular app', done:false}];

	todoList.addTodo = function() {
	todoList.todos.push({text:todoList.todoText, done:false});
	todoList.todoText = '';
	};

	todoList.remaining = function() {
	var count = 0;
	angular.forEach(todoList.todos, function(todo) {
	count += todo.done ? 0 : 1;
	});
	return count;
	};

	todoList.archive = function() {
	var oldTodos = todoList.todos;
	todoList.todos = [];
	angular.forEach(oldTodos, function(todo) {
	if (!todo.done) todoList.todos.push(todo);
	});
	};

	});</script></body>
	</html>