JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="//codeorigin.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<div ng-app="myModule" ng-controller="ModalController">{{ checkboxDoc }} favourites
  <tabset><tab heading="Documents">
            <tab-directive display="docsLib">  <input type="checkbox" ng-model="checkboxDoc.checked">
                {{ checkboxDoc }}
        <ul>
            <li ng-repeat="doc in docsLib | filter:favFilter">{{doc}}</li>
        </ul>
</tab-directive>
                </tab>
      </tabset>
</div>

JavaScript

angular.module('myModule', ['ui.bootstrap']);
angular.module('myModule').controller('ModalController', function($scope) {
    $scope.favsLib = [1, 19];
    $scope.docsLib = [{
        "id": 19
    }, {
        "id": 23
    }];
    $scope.checkboxDoc = {checked: false};
    $scope.favFilter = function (docsLib) {
        if ($scope.favsLib.length > 0 && $scope.checkboxDoc.checked == true) {
            if ($.inArray(docsLib.id, $scope.favsLib) < 0) return;
        }

        return docsLib;
    }
});
angular.module('myModule').directive('tabDirective', function() {
    return {
        scope: {
            display: '='
        },
        controller: "ModalController",
        restrict: 'AE',
        replace: true,
        link: function(scope, elm, attrs) {
            
        }
    };


});