Tab's content overlaps its neighbour's tab's content - angularjs

Question

Let me explain the issue with the help of the following example:
I added 3 tabs e.g. TAB1 , TAB2 and TAB3. Now If I delete TAB2, the
remaining tabs will be TAB1 and TAB2 (as TAB3 will take TAB2 place
now). Now, when I add a new tab e.g. TAB3, I will see 2 tab's contents
at the same time. One which tab was newly created and second which tab
was right behind the newly created tab.
I monitored the HTML at the time of addition and deletion of the tab by inspecting and also checked array's index values they were changing fine.
As far I could detect, the cause of it is that the content tab of the newly added tab is actually getting static "active" class which does not changes.
I guess ui.bootstrap is the causing this issue.
I'm using the following code to make tabs functionality I need.
HTML code is:
<uib-tabset active="activeForm">
<uib-tab index="$index + 1" ng-repeat="tab in $scope.tabs" heading="{{tab.title}} {{$index+1}} " active="{{tab.active}}">
{{tab.content}}
<button type="button" class="btn pull-left btn-primary" ng-click="removeTab($index);">
Delete this wave
</button>
</uib-tab>
<button type="button" class="btn" ng-click="addNewTab();">
+
</button>
</uib-tabset>
And js code is:
$scope.tabs = [
{ title:'TAB'+($scope.tabs.length+1), content:'This wave of contacts will be activated before all other waves of contacts.', active:true }
];
$scope.addNewTab = function() {
$scope.tabs.push(
{
title:'TAB'+($scope.tabs.length+1), content:'Content for tab new tab.'
});
$scope.removeTab = function(index) {
if($scope.tabs.length>1) {
$scope.tabs.splice(index, 1);
}
};
}
One more thing, I'm totally new to both AngularJS and angular ui.bootstrap. So, please treat me as a beginner.

Answer 1

you must use "track by $index" in ng-repeat if you are using $index in your logic (html)
e.g ng-repeat="tab in $scope.tabs track by $index"