JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="Ctrl">
    <h1>My Foo</h1>
    <ul>
        <li ng-repeat="foo in foos">
            <a href="#" ng-click="setBarFilter(foo.name)">{{foo.name}}</a>
        </li>
    </ul>
    <br />
    <h1>My Bar</h1>
    <ul>
        <li ng-repeat="bar in bars | filter:barFilter">{{bar.name}}</li>
    </ul>

</div>

JavaScript

function Ctrl($scope) {
    
    $scope.foos = [{
        name: 'Foo 1'
    },{
        name: 'Foo 2'
    },{
        name: 'Foo 3'
    }];
    
    $scope.bars = [];
    
    $scope.setBarFilter = function(foo_name) {
        $scope.barFilter = {};
        $scope.barFilter.foo = foo_name;
    }
    
}