How do simple filters work in Angular?

Question

Angular

Hello, there are 2 options, both do only one half of the work, but I don’t know how to combine)

<tr ng-repeat="product in products | filter:query | orderBy:predicate | orderBy:price">

The first option sorts everything and outputs perfectly. But

<h1 ng-show="products.length == 0">Empty products</h1>

This line displays the entire number of products in the array. (And not the number remaining after sorting) Plus the button

<a href="#" class="btn btn-danger" ng-click="clear()">Clear</a>

Does not reset the filter.
Second option

<tr ng-repeat="product in products = (products | filter:query | orderBy:predicate | orderBy:price)">

Here the sorting has somehow deteriorated, but the filters are reset and only the number of filtered goods is displayed.
In short, both options work only 50%.
https://jsbin.com/nuvuwileje/edit?html ,js,output
The first option works better, but how can I set to display the number of filtered products only??

Answer 1

both do only one half of the work, but I don’t know how to combine

Make the collection you need in the controller, or better yet, in the service. Stop using collection filters. Yes, you can, but only for very simple cases and only to quickly do it on your knee.