JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<body ng-app="ui.bootstrap.demo">
<div ng-controller="TabsDemoCtrl">
<tabset>
<tab heading="Tab 1">
<input ng-model="txtSearch" />
<table class="table">
<tr ng-repeat="item in filteredCollection = (myCollection | filter: txtSearch)">
<td ng-bind="item"></td>
</tr>
</table>
<button ng-click="addItem()">Add item</button>
</tab>
<tab heading="Tab 2">
<p>Tab 2 content</p>
</tab>
</tabset>
</div>
</body>
JavaScript
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope) {
$scope.myCollection = ['Tomato', 'Cheese', 'Wine', 'Cherry', 'Chocolate'];
$scope.addItem = function() {
$scope.myCollection.push('ExtraItem of ' + new Date());
};
$scope.$watchCollection('filteredCollection', function() {
if (typeof($scope.filteredCollection) != 'undefined')
console.log('Results changed : ' + $scope.filteredCollection.length);
});
});