Chaining Angular filters in controller while making them variable

Question

Say I create an Angular app and write some new filters: Show only odds, and show only lucky numbers.

There's an oddList filter and a luckyList filter:

var app = angular.module('app', []);
app.filter('oddList', function() {
    return function(items) {
        var filtered = [];
        angular.forEach(items, function(item) {
            if (item % 2 !== 0)
                filtered.push(item);
        });
        return filtered;
    };
});
app.filter('luckyList', function() {
    return function(items) {
        var filtered = [];
        angular.forEach(items, function(item) {
            if (item === 2 || item === 7 || item === 11)
                filtered.push(item);
        });
        return filtered;
    };
});

In the view portion, I can chain these filters:

<ul><li ng-repeat="number in numbers | oddList | luckyList">{$number}</li></ul>

When this works, I should see 7 and 11 remaining.

I want to make my filters variable for this ng-repeat. Is there something I can do that's similar to this process?

Say I name the variable filter filter:listFilter so that in our controller, we can dynamically update $scope.listFilter.

<ul><li ng-repeat="number in numbers | filter:listFilter">{$number}</li></ul>

And the controller with pseudo code:

app.controller('main', function($scope, $filter) {
    $scope.numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    $scope.listFilter = $filter('oddList | luckyList');
});

Any idea how I could chain (variable) filters in the controller? Would like to be able to toggle between just odd, just lucky and/or both.

Answer 1

An approach is to use a function to return the filtered data:

function MainCtrl($scope, $filter) {
    $scope.numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

    $scope.filteredNumbers = function() {
        var result = $scope.numbers;

        if ($scope.oddListEnabled) {
            result = $filter('oddList')(result);  
        }        
        if ($scope.luckyListEnabled) {    
            result = $filter('luckyList')(result);
        }

        return result;
    };
}

And the template:

<ul>
  <li ng-repeat="number in filteredNumbers()">
    {{number}}
  </li>
</ul>

Here is a plunkr: http://plnkr.co/edit/4ectDA?p=preview