Angular todo list

by kalar su

HTML

<div ng-app="todoApp">
  <h2>To Do List in AngularJS</h2>
  
  <section ng-controller="todoController as todoList">
    <div class="block-container" id="todo-form">
      <form ng-submit="todoList.addTodo()">
        <input type="text" ng-model="todoList.todoText" placeholder="please enter new task" size="50">
        <input type="submit" value="add">
      </form>
    </div>
    <div class="block-container" id="todo-list">
      <ol>
        <li ng-repeat="todo in todoList.todos">
          <input type="checkbox" ng-model="todo.done">            
          <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>
      </ol>
    </div>
    <div class="block-container" id="todo-status">
    <div>{{todoList.remaining()}} / {{todoList.todos.length}} remaining task  [<a href="" ng-click="todoList.archive()">archive</a>]</div>
    </div>  
  </section>
</div>

SCSS

html{
  font-size: 100%;
}
body{
  font-size: 1em;
  font-family: helvetica;
}
h2{
  font-size: 1.8em;
  text-align: center;
}
ol{
  list-style-type:decimal;    
  li{
    
    .done-true{
      text-decoration: line-through;
      color: grey;
    }
  }
}
.block-container{
  width: 100%;
  background-color: white;
  padding: 5%;
}
#todo-form{
  background-color: #00aaff;
}
#todo-list{
  
}
#todo-status{
  border-top: 1px solid grey;
}

JavaScript

angular.module('todoApp',[])
.controller('todoController', function(){
	var todoList = this;
  todoList.todos = [
      {text:'learn angular', done:true},
      {text:'build an angular app', done:false}];
  
  todoList.addTodo = function(){
  	if(todoList.todoText!=''){
    	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);
      }
    });
  };
});