How to make a tabs navigation with an "All" tab in Angular and Bootstrap?

Question

I am using Bootstrap and Angular and I have the following HTML:

<ul class="nav nav-tabs">
    <li class="active"><a data-target="#" data-toggle="tab">All</a></li>
    <li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div>
  <div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div>
</div>

I want to visualize both #tab1 and #tab2 when the "All" tab is clicked. How do I achieve this with Bootstrap and Angular?

Answer 1

I found the solution in this answer.

<ul class="nav nav-tabs">
    <li class="active"><a data-target=".tab-pane" data-toggle="tab">All</a></li>
    <li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
    <div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div>
    <div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div>
</div>

I just set the data-target of the "All" tab to a CSS class, that is present in all of my tabs. It doesn't have to be exactly 'tab-pane', you can use your own class - 'foo' or 'bar'. It's a nice and simple solution, as no external libraries are required to achieve this.