angularjs - Angular 3 filters (inputs and checkboxes) -

i need help.

screenshot: https://monosnap.com/file/vxadq975fvt6qhkecfxlfyhggd3san

i have 3 filters on top: rooms, size , price. how filter table results, when typing in filter fields?

update

$scope.$watch( '[min_size, max_size]', function(val) {         $scope.filterbysizerange();     });      $scope.filterbysizerange = function() {         $scope.filteredsizes = [];          angular.foreach($scope.apps, function(items) {             if (items.size >= $scope.min_size                 && items.size <= $scope.max_size) {                 $scope.filteredsizes.push(items);             }              if (!$scope.min_size                  && !$scope.max_size) {                 $scope.filteredsizes.push(items);             };         });     }; 

update 3 here solution, works single or multiple range input fields

fiddle

i think want use $watchgroup.

$scope.$watchgroup(['min_size', 'max_size'], function(val) {         $scope.filterbysizerange();     });      $scope.filterbysizerange = function() {         $scope.filteredsizes = [];          angular.foreach($scope.apps, function(items) {             if (items.size >= $scope.min_size                 && items.size <= $scope.max_size) {                 $scope.filteredsizes.push(items);             }              if (!$scope.min_size                  && !$scope.max_size) {                 $scope.filteredsizes.push(items);             };         });     }; 

anyway believe better create own filter function

// template

<div ng-repeat="item in apps|sizefilter:min_size:max_size"> 

// filter

app.filter('sizefilter', function() {   return function(collection, minsize, maxsize) {   var items = collection.slice(0, collection.length -1);         var =0, len = items.length         (; < len;) {             if (items.size < minsize && items.size > maxsize) {                 items.splice(i, 1);             } else {               i++;             }         }         return items;     });      }; });