Angular - Filter and Delete with "Controller As" Syntax

Question

I'm trying to learn how to write cleaner code by converting the tutorial at HERE to the "Controller As" syntax and I'm stuck on the very last step where he deletes completed "ToDos". Everything else from the tutorial works except this, nothing happens when I click Clear Completed. If anyone could break down where I am going wrong it would be greatly appreciated.

A Plunker was asked for so I have created one HERE It doesn't work at all but I guess it will make it easier to see my code.

Relevant HTML:

    <div ng-controller="listController as list" class="app-container">
        <form name="list.form" ng-submit="list.addTodo()">
            <input type="text" ng-model="list.model.newTodo" name="newTodo" required />
            <button class="button success" ng-disabled="frm.$invalid">Go</button>
        </form>
        <button class="button" ng-click="list.clearCompleted()">Clear Completed</button>
        <ul>
            <li ng-repeat="todo in list.data">
                <input type="checkbox" ng-model="todo.done" />
                <span ng-class="{'done':todo.done}">{{todo.title}}</span>
            </li>
        </ul>
    </div>

All of my JS:

(function(){

angular
    .module('ToDo')
    .controller('listController', ListController);

    function ListController(){
        var vm = this;
        vm.data = todosData;
        vm.addTodo = addTodo;
        vm.clearCompleted = clearCompleted;

        function addTodo(){
            todosData.push({'title': vm.model.newTodo, 'done': false});
            vm.model.newTodo = '';
        }

        function clearCompleted(){
            todosData = todosData.filter(function(item){
                return !item.done;
            });
        }
    }

    var todosData = [
        {
            'title':'Build a todo app',
            'done':false
        }
    ];
})();

Answer 1

The problem is you're completely replacing the todosData with the new collection returned from the filter. But you only set vm.data to todosData once, when the controller is instantiated.

I personally would just remove the variable todosData everywhere and just use vm.data everywhere you now use todosData. But you could also just set vm.data to todosData as the last line in clearCompleted().

Answer 2

I'm guess the problem is with clear completed not assigning the result of the filter back to vm.data. Does this work?

function clearCompleted(){
  vm.data = vm.data.filter(function(item){
    return !item.done;
  });
}