JSFiddle - React, Tailwind, and code Playground

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div ng-controller="MyCtrl">
    <div>
        <section class="left" style="border-right:1px">  
            <div class="filter">
            Category
            <div>
                <div ng-repeat="category in categoryGroup">
                    <b><input type="checkbox" ng-model="useCategory[category]"/>{{category}}</b>
                    <span>({{ (filteredBusiness | filter:query | filter:count('category', category)).length }})</span>
                </div>
            </div>
        </section>        
        <section class="right" style="border-right:1px">
            <div>
                <ul>
                <li ng-repeat="business in filteredBusiness | filter:query" >
                    <p><b>Name: {{business.name}}</b> - Category: {{business.category}} | Open: {{business.open}}</p>
                </li>
                </ul>    
            </div>
        </section>
    </div>
</div>

CSS

.left {
    display:      inline;
    float:        left;
    margin-left:  10px;
    margin-right: 10px;
    width:        20%;
}
.right{
    display:      inline;
    float:        left;
    margin-left:  10px;
    margin-right: 10px;
    width:        60%;    
}
.right li {
    padding-bottom:10px;
}
.top {
    border-bottom: thick solid rgb(11, 112, 178);
}
.left {
    margin:5px;
    border-right: thin solid gray;
}
.filter {
    margin:10px;
    border-bottom: thin solid rgb(218, 218, 218);
}

JavaScript

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

var uniqueItems = function (data, key) {
    var result = [];
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];
        if (result.indexOf(value) == -1) {
            result.push(value);
        }
    }
    return result;
};

function MyCtrl($scope, filterFilter) {
    $scope.useCategory = {};
        
    $scope.business = [
        {name: 'Company 001', category: ['Wine','Market'], open: 'O'},
        {name: 'Other Company', category: ['Food','Market', 'Water'], open: 'O'},
        {name: 'Shoes&Dress Co.', category: ['Boots','Shoes'], open: 'O'},
        {name: 'OwnShoes Co.', category: ['Sandals','Shoes'], open: 'O'},
        {name: 'BeautyDress', category: ['Dress'], open: 'O'},
        {name: 'Master Food', category: ['Wine','Market', 'food'], open: 'O'},
        {name: 'Super Market', category: ['Donuts','Market'], open: 'O'},
        {name: 'YoShoes', category: ['Sneaker','Shoes'], open: 'O'},
        {name: 'Elegant Dress', category: ['Dress','Clothes', 'Sandals'], open: 'O'},
        {name: 'SummerShoes', category: ['Shoes'], open: 'O'},
        {name: 'Awesome Clothes', category: ['Clothes'], open: 'O'},
        {name: 'Exclusive Wine', category: ['Wine'], open: 'O'},
        {name: 'Kitchen Food', category: ['Food','Kitchen Food'], open: 'O'},
        {name: 'Little Market', category: ['Sports'], open: 'O'},
        {name: 'FoodChef', category: ['Food', 'Restaurant'], open: 'O'}
    ]; 
    
    // Watch the pants that are selected
    $scope.$watch(function () {
        return {
            players: $scope.business,
            useCategory: $scope.useCategory
        }
    }, function (value) {
        var selected;
        
        $scope.count = function (prop, value) {
            return function (el) {
                return el[prop] == value;
            };
        };
        
        $scope.categoryGroup = uniqueItems($scope.business, 'category');
        
        var...