angularjs - タブ競合のui-bootstrap角度フィルター

Question

タブセット内のフィルタに問題があります。

angular.module('myModule', ['ui.bootstrap']);
angular.module('myModule').controller('ModalController', function($scope) {
$scope.favsLib = [1, 19];
$scope.docsLib = [{
    "id": 19
}, {
    "id": 23
}];
$scope.checkboxDoc = false;
$scope.favFilter = function (docsLib) {
    if ($scope.favsLib.length > 0 && $scope.checkboxDoc == 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) {

    }
};


});

これが私が望むhtmlです：

<div ng-app="myModule" ng-controller="ModalController">
  <tabset>
    <tab heading="Documents">
      <tab-directive display="docsLib">  <input type="checkbox" ng-model="checkboxDoc">favourites
    <ul>
        <li ng-repeat="doc in docsLib | filter:favFilter">{{doc}}</li>
    </ul>
   </tab-directive>
    </tab>
    </tabset>
</div>

タブセットの外にある入力ボックスを使用すると、フィルターは正常に機能します。

タブセット外での作業 - jsfiddle

チェックボックスをクリックすると、結果が正しくフィルタリングされます。

ただし、タブセット内に入力を配置しても機能しないため、ui-bootstrap に問題がある可能性があります。

誰にもアイデアはありますか？ありがとう。