JSFiddle - React, Tailwind, and code Playground

HTML

<!---filters in side menu side menu ---------------------------------------->
<div ng-app="dishapp">
    <div data-ng-controller="dishTypeListController">
        	<h1 class="featured_in_mag_name">Available filters criteria</h1>

        <div class="listing_venue_types_filter_page">
            <div class="input_dishtype_selection " data-ng-repeat="dishType in dishTypeList" ng-class="{'filter_selected':selection.indexOf($index) != -1}" ng-click="toggle($index)">{{dishType.name}}</div>  
        </div>
        <!-- listing_venue_types_filter_page-->
    </div>
    <!---Filter result in main panel ---------------------------------------->
    <ion-list data-ng-controller="DishListController">
        <ion-item ng-repeat="dish in dishList | selectedDishType:selection ">
            <article class="item_frame">
                	<h1 class="item_name_english">{{dish.nameEnglish}}</h1>

                	<p class="item_name_local_language">{{dish.nameLocal}}</p>

               
            </article>
            <!--main article frame 1 -->
        </ion-item>
    </ion-list>
</div>

CSS

.filter_selected {
    color: white;
    background-color: #F39C12;
    border: 1px solid white;
}

JavaScript

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

// filter selection
//------------------
dishListApp.controller('dishTypeListController', function ($scope, $rootScope) {
    $scope.dishTypeList = [{
        'status': 'online',
            'name': 'Meat'
    }, {
        'status': 'offline',
            'name': 'Soup'
    }, {
        'status': 'online',
            'name': 'Fish'
    }, {
        'status': 'offline',
            'name': 'Stew'
    }, {
        'status': 'offline',
            'name': 'Fruit'
    }, {
        'status': 'offline',
            'name': 'entree'
    }, {
        'status': 'online',
            'name': 'snack'
    }];
    $scope.selection = [];

    $scope.toggle = function (idx) {
        var pos = $scope.selection.indexOf(idx);
        if (pos == -1) {
            $scope.selection.push(idx);
        } else {
            $scope.selection.splice(pos, 1);
        }
        $scope.dishTypeList.filter(function (dType, idx) {
            return $scope.selection.indexOf(idx) != -1;
        });

        //calling an event to any listener with the latest selection data.
        $rootScope.$emit('dishType.selectionChanged', $scope.dishTypeList.filter(function (dType, idx) {
            return $scope.selection.indexOf(idx) != -1;
        }).map(function (dType) {
            return dType.name.toLowerCase();
        }));
        //calling an event to any listener with the latest selection data.
    };

})

// filter selection
//------------------


.controller('DishListController', function ($scope, $rootScope) {
    //initial selection data for filtering the dishlist
    $scope.selection = [];
    //initial selection data for filtering the dishlist

    $scope.dishList = [{
        nameEnglish: 'beef burgungdy',
        nameLocal: 'boeuf bourgignon',
        description: 'xxxxxxxx',
        region: 'sicile',
        itemid: 'IT018',
        cuisineTypeIsoCode: 'IT',
        country: 'France',
        dishCategory: 'meat',
        id: 1,
   ...