not show active tab title correctly in AngularStrap tab

Question

I have four tabs using the latest AngularStrap tab, every tab has a close button, and every tab pane using the latest ui-grid.

1. expected result: close the second tab, then show the third active tab, which can show the third tab title and tab pane correctly.
2. but the actual result is: close the second tab, then show the third tab pane correctly, the third active tab title can't show correctly, it show the fourth active tab title.

html code:

        <div data-fade="1" bs-active-pane="tabs.activeTab" bs-tabs>
            <div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-include src="tab.page" bs-pane></div> 
        </div>

js code:

    // delete tab
    closeTab = function(obj){
        var index = obj.parentElement.dataset.index;
        // remove your selected tab
        $rootScope.tabs.splice(index, 1);
        if(!angular.isUndefined($rootScope.tabs[index])){
            // show the next active tab title.
            $rootScope.tabs.activeTab = $rootScope.tabs[index].title;

        }

    }

can anyone help me? thank u very much!

Dopp

please view the details: plnkr.co/edit/hSg15IMOPOdGPkD6Fzfg?p=preview – Dopp

Answer 1

When you splice from the array the indices change because the element is removed so $rootScope.tabs.activeTab = $rootScope.tabs[index].title; doesn't align anymore;

Solidago

but i debug the code, watch the vale of $rootScope.tabs[index].title is not null – Dopp