AngularJS filter by select with empty options

Question

I am trying to build a filtering system for a table in AngularJS.

I have a list of products which are each tied to a system. I want to be able to have all systems listed

Answer 1

var app = angular.module('myApp',['myFilters']);

angular.module('myFilters', []).
filter('customFilter', function () {
    return function (products,filter) {
        var results = [];
        console.log(filter);
        if(!filter.system_id) {
            return products;
        }
        angular.forEach(products, function(product) {
            if(product.system_id === filter.system_id) {
                results.push(product);
            }
        });
        return results;
    };
});


   <li ng-repeat="product in products | customFilter: filter">
        {{ product.name }}
        </li>
    </ul>

we can use a custom filter to accomplish this

see in action

http://jsfiddle.net/xujihui1985/9yk7a6v3/2/