angularjs bootstrap ng-repeat not working inside tab

Question

I am trying to build a tab using angularjs ui-bootstrap.Got the tab working.

Below the tab, have content displayed using ng-repeat. In one of the tabs, wanted to do search on the listed contents in ng-repeat. But the search is not working.

If I move the search box out of tab, it is working.

HTML Code:

<tabset>
    <tab heading="Static title">Static content
      Enter text to search
    <input id="search" type="text" class="form-control" ng-model="search.title" placeholder="this is not working">  
    </tab>

    <tab select="alertMe()">
      <tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </tab>
  </tabset>
  <input id="search" type="text" class="form-control" ng-model="search.title" placeholder="this is working">
  <hr />

  <div ng-repeat="tab in tabs | filter:search">
      {{tab.content}}
  </div>

Placeholder will help you find the working one.

JS Code:

var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:'one', content:'Dynamic content 1' },
    { title:'two', content:'Dynamic content 2'}
  ];

};

Complete Code in plunker: http://plnkr.co/edit/xDEP8W?p=preview

This is why I like to initialize everything in my controller that I plan on using/needing. The tabset creates its own scope, that the controller doesn't have access to. If you put $scope.searchnotworking = {}; $scope.searchworking = {}; in your controller, it works. That's because the input's ng-model will look in the closest scope (tabset) and set the model on that scope. And the filters only truly work as long as you use the correct thing to filter by (filter:searchnotworking.title) - plnkr.co/edit/ntJQRGsvXp5LtwbSi4zz?p=preview — Ian

Dylan Dylan · Accepted Answer · 2014-07-22T20:56:11

if you just add $scope.searchnotworking = []; to the js it will initialize. Not entirely sure why it wouldn't otherwise, $scope I suppose.

angularjs bootstrap ng-repeat not working inside tab

1 Answers