JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="ctrl">
        <span ng-bind="filteredItems.length"></span> filtered<br />
        <hr />
        <div class="item" ng-repeat="item in items | filter | limitTo: 2 as filteredItems"></div>
    </div>
</div>

CSS

.item {
    height: 10px;
    width: 30px;
    background-color: dodgerblue;
    margin: 5px;
}

JavaScript

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

app.filter('filter', function() {
    return function(input) {
        return input.slice(0, 4); // 4 items - initial filter
   };
})

app.controller('ctrl', ['$scope', '$filter', function($scope, $filter) {
    $scope.items = [
        {'key': 'A', 'value': 0},
        {'key': 'B', 'value': 1},
        {'key': 'C', 'value': 2},
        {'key': 'D', 'value': 3},
        {'key': 'E', 'value': 4},
        {'key': 'F', 'value': 5},
        {'key': 'G', 'value': 6},
        {'key': 'H', 'value': 7}
    ];
    
    $scope.filteredItems = $filter('filter')($scope.items)
}]);