JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="ctrl">
    Min price: <input type="text" ng-model="minPrice"> <br>

    Max price: <input type="text" ng-model="maxPrice"> <br>
    Name: <input type="text" ng-model="item.name">
    <ul ng-repeat="e in items | costsLessThan:maxPrice | costsMoreThan:minPrice |filter: item">
        <li>Item name: {{e.name}}, price: {{e.price}}$</li>
    </ul>
</div>

JavaScript

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

app.controller('ctrl', function($scope){
    $scope.maxPrice = 100;
    $scope.items = [
        {name: 'Item 1', price: 123},
        {name: 'Item 2', price: 110},
        {name: 'Item 22', price: 10},
        {name: 'Item 3', price: 90},
        {name: 'Item 4', price: 80},
    ];
});

app.filter('costsLessThan', function(){
    return function(ar, maxPrice){
        console.log(ar);
        return ar.filter(function(e){
            return e.price <= maxPrice;
        });
    };
});

app.filter('costsMoreThan', function(){
    return function(ar, minPrice){
        console.log(ar);
        return ar.filter(function(e){
            return e.price >= minPrice;
        });
    };
});