angularjs - ui-bootstrap angular filter in tab conflict -

i have issue filter when inside tabset.

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) {      } };   }); 

here html like:

<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> 

if take the input box outside of tabset filter works fine:

working outside tabset - jsfiddle

clicking on checkbox filters results correctly.

but placing input inside tabset doesn't work, there maybe issue ui-bootstrap.

has ideas? thanks.

it no issue ui-bootstrap, scoping.

when placing checkbox inside tabstrip, checkboxdoc property placed @ inner scope (the scope created tabstrip directive). property used filtering list in placed @ outer scope (the controller scope).

quick , dirty fix place checkbox inside tabstrip, change model ng-model="$parent.checkboxdoc".

the proper way is, not put primitive @ scope object. instead of using $scope.checkboxdoc = false, assign $scope.checkboxdoc = {checked: false);. can read/write parent/outer/controller scope property assigning <input type="checkbox" ng-model="checkboxdoc.checked">

see corrected fiddle: http://jsfiddle.net/xm1q9on9/14/

somewhere once read, ng-model attribute should contain @ least 1 dot, object.property. mnemonic helps never assign primitive properties scope object directly , have fixed probpem. read more scoping @ official angular documentation or more details @ angularjs wiki.