How to filter nested object array with dynamic multiple check boxes in AngularJS. OR with and Filter

First thing you need to understand: this problem is not, by any definition, simple. You want to find a match based on a property of an object in an array which is a property of an object inside an input array you're supplying, not to mention [OR intra group] + [AND inter group] relations, search properties defined by either .title or .name, as well as criteria selection being completely dynamic. It's a complex problem.

Though it's a common scenario for shopping cart websites, I doubt that any web framework will have this kind of functionality built into its API. It's unfortunate but I don't think we can avoid writing the logic ourselves.

At any rate, since ultimately you want to just declare productFilter:search, here it is:

app.filter('productFilter', function($filter) {
    var helper = function(checklist, item, listName, search) {
        var count = 0;
        var result = false;
        angular.forEach(checklist, function(checked, checkboxName) {
            if (checked) {
                count++;
                var obj = {};
                obj[search] = checkboxName;
                result = result || ($filter('filter')(item[listName], obj, true).length > 0);
            }
        });
        return (count === 0) || result;
    };

    return function(input, definition) {
        var result = [];

        if (angular.isArray(input) && angular.isObject(definition)) {
            angular.forEach(input, function(item) {
                var matched = null;
                angular.forEach(definition, function(checklist, listName) {
                    var tmp;
                    if (listName !== 'colours') {
                        tmp = helper(checklist, item, listName, 'title');
                    } else{
                        tmp = helper(checklist, item, listName, 'name');
                    }
                    matched = (matched === null) ? tmp : matched && tmp;
                });
                if (matched) result.push(item);
            });
        }
        return result;
    };
});

A couple of notes:

• How to use: ng-repeat="product in products | productFilter:search".
• The filter only does some basic checks: input must be an array, and definition must be an object. If you need more, you may do so there.
• I would say that *.name is an exception to the rule (I assume that most of the criteria is defined by *.title). So, we handle that in if/else.
• The count variable in a helper function is used to track how many checked checkbox(es) we went through for a particular criteria group. If we went through none, it means that whole criteria group is inactive, and we just return true.
• It's a good design to create a filter that doesn't mutate the states of other objects outside it. That's why using count is better than calling cleanObj(). This is especially crucial when designing common components for other devs to use in a team: you want to minimize the element of surprise as much as possible.