JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
    <p>{{remaining()}} of {{todos.length}} remaining [<a href="" ng-click="archive()">archive</a>]</p>
    <ul>
        <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done" />
            <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>
    </ul>
    <form ng-submit="addTodo()">
        <input type="text" ng-model="todoText" placeholder="add new todo here" />
        <button type="submit">add</button><br />
        <!--input type="text" ng-model="search" placeholder="Search..." /-->
    </form>
</div>
</body>

JavaScript

function TodoCtrl($scope) {
  $scope.todos = [];
 
  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };
 
  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };
 
  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}