My code uses Angularjs and Bootstrap tabs. Here is an example:
<body ng-controller="TabsCtrl">
<button ng-click="addNewWorkspace('jobs')">Open Tab jobs<i class="icon-plus-sign"></i></button>
<button ng-click="addNewWorkspace('invoices')">Open Tab invoices<i class="icon-plus-sign"></i></button>
<button ng-click="addNewWorkspace('payments')">Open Tab payments<i class="icon-plus-sign"></i></button>
<ul class="nav nav-tabs">
<li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab">
<a href="{{tab.link}}" ng-click="setSelectedTab(tab)">{{tab.label}}
<button ng-click="removeTab($index)">-<i class="fa fa-times"></i></button>
</a>
</li>
</ul>
<div ng-view></div>
</body>
One issue I encountered is that when I open a new tab by clicking a button, the tab is created but not automatically active. I have to click on the tab to see its content.
Another problem arises when I close a tab after opening it. The closed tab does not retain the information from other open tabs. For instance, if I open the payments tab and then close it, the jobs info doesn't show up.
To address these problems, I attempted using $location.path and $window to manipulate the tab switching behavior, but without success.
I'm unsure if I misunderstood some crucial concepts related to tab functionality.