How to create tabs in angularjs

If you'd like to code your own solution. On the collection add a property e.g. selectedItem and set that via ng-click on the tab header.

On the respective generated div you can then add a ng-show="item.$parent.selectedItem === item" to the respective div and you get a rather simple tab control.

You can use for tabs bootstrap ui library: https://angular-ui.github.io/bootstrap/#/top

On internet you can find another example for tabs. This is easy tutorial for tabs: https://thinkster.io/angular-tabs-directive

I hope I helped

You can use ng-template

template.html:

 <ul>
    <li ng-repeat="tab in tabs" 
        ng-class="{active:isActiveTab(tab.id)}" 
        ng-click="onClickTab(tab)">{{tab.title}}</li>
  </ul>
 <div id="mainView">
       <div ng-include="currentTab"></div>
    </div>
    <script type="text/ng-template" id="1.html">
      <!-- content for tab1 -->
    </script>
    <script type="text/ng-template" id="2.html">
      <!-- content for tab2 -->
    </script>

Contrller.js $scope.tabs = [{ title: 'One', id: '1.html' }, { title: 'Two', id: '2.html' }];

$scope.currentTab = '1.html';

$scope.onClickTab = function (tab) {
    $scope.currentTab = tab.id;
}

$scope.isActiveTab = function(tabUrl) {
    return tabUrl == $scope.currentTab;
}