How can I filter a displayed array and redisplay the filtered list?

Question

So I am creating a simple AngularJS to-do-list. I am successful in adding a list but when I am about to create the controller to filter the finished to-dos and redisplay the unfinished to-dos to the screen, I am having an error that I can't find out. I think my ng-submit is not working because it can't call the function that I want to call when the button was clicked. Any help would be much appreciated.

This is my html file:

<div ng-contoller="CompletedController as completeCtrl">
    <input class="clearbutton" type="submit" value="Clear Completed" ng-submit="completeCtrl.unfinished()"></input>
</div>

and my jsfile:

app.controller('CompletedController', function(){
    todoCtrl.currentTodos = [];
    this.unfinished = $filter('filter')(todoCtrl.currentTodos, array, function(currentTodo){
        return !currentTodo.status;
    });
    todoCtrl.currentTodos = this.unfinished;
});

Answer 1

You can't access a controller's scope from within another controller's scope, in the way that you're calling todoCtrl.currentTodos. You would need to either combine the controllers, or share data between them using a service/factory.

Your unfinished error, if I read you right, may be solved with:

app.controller('CompletedController', function($scope){
    $scope.unfinished = function(){
      //function content
    }
});