JSFiddle - React, Tailwind, and code Playground

by Aaron Zhang

HTML

<div ng-app="myApp">
    <div ng-controller="myController">{{ myVar }}
        <div my-directive collections="myVar" menus="values"></div>
        <label>
            <input type="checkbox" ng-model="myVar[0]">myVar[0]</label>
        <label>
            <input type="checkbox" ng-model="myVar[1]">myVar[1]</label>
        <label>
            <input type="checkbox" ng-model="myVar[2]">myVar[2]</label>
    </div>
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('myController', ['$scope', function ($scope) {
    $scope.myVar = {0:false,1:false,2:false};
    $scope.values = ['GO1','GO2','GO3'];
}]);

app.directive('myDirective', [function () {
    return {
        scope: {
            collections: '=',
            menus: '='
        },
        replace: true,
        template: '<div ng-repeat="i in menus" ng-show="show[$index]">{{ i }}</div>',
        link: function (scope, element, attrs) {
            scope.show = {};
            scope.$watchCollection('collections', function (val) {
                scope.show = val;
            });
        }
    };
}]);