Everything was working perfectly until I added ng-repeat to the content
<ul>
<li ng-class="{active:tab===1}">
<a href ng-click="tab = tab==1 ? a : 1">Tab1</a>
</li>
<li ng-class="{active:tab===2}">
<a href ng-click="tab = tab==2 ? a : 2">Tab2</a>
</li>
<li ng-class="{active:tab===3}">
<a href ng-click="tab = tab==3 ? a : 3">Tab3</a>
</li>
</ul>
<br><br>
<p ng-show="tab === 1"> Tab1 content </p>
<p ng-show="tab === 2"> Tab2 content</p>
<p ng-show="tab === 3"> Tab3 content</p>
I then successfully added ng-repeat only in the content, leaving the tabs untouched
<ul>
<li ng-class="{active:tab===1}">
<a href ng-click="tab = tab==1 ? a : 1">Tab1</a>
</li>
<li ng-class="{active:tab===2}">
<a href ng-click="tab = tab==2 ? a : 2">Tab2</a>
</li>
<li ng-class="{active:tab===3}">
<a href ng-click="tab = tab==3 ? a : 3">Tab3</a>
</li>
</ul>
<br><br>
<p ng-show="tab === {{$index}}" ng-repeat="data in data">
<a ng-repeat="value in data.value">{{value.name}}</a>
</p>
But when I attempted to add ng-repeat to both tabs and content, it didn't work as expected
<ul>
<li ng-repeat="data in data" ng-class="{active:tab==={{$index}}}">
<a href ng-click="tab = tab=={{$index}} ? a : {{$index}} ">Tab1</a>
</li>
</ul>
<br><br>
<p ng-show="tab === {{$index}}" ng-repeat="data in data">
<a ng-repeat="value in data.value">{{value.name}}</a>
</p>
I thought I followed logical steps while writing the code, but for some reason, it's not functioning properly. Can anyone provide some help please?