JSFiddle - React, Tailwind, and code Playground

HTML

<div data-ng-app>
<table data-ng-controller="TableCtrl">
    <tr data-ng-repeat="item in items" data-ng-hide="func(item)">
        <td> {{ item }} </td>
    </tr>
    <tr>
        <td>
            <p>number of items shown: {{ numberOfShownItems }}</p>
    <p data-ng-show="qVisible" style="display: none;"> I'm only shown when qVisible is true</p>
        </td>
    </tr>
</table>
    
</div>

JavaScript

function TableCtrl($scope) {
    function update(newValue) {
        var i;
        $scope.numberOfShownItems = 0;
        
        for (i = 0; i < newValue.length; i += 1) {
            if ($scope.func(newValue[i])) {
                $scope.numberOfShownItems += 1;
            }
        }
        
        $scope.qVisible = !!$scope.numberOfShownItems;
    }
    
    $scope.items = [1,2,3,4,5,6];    
    
    $scope.func = function (item) {
        if (item % 2 === 0) {
            return true;
        }
        
        return false;
    }
    
    $scope.$watch('items', update);
}