Simplest way to use Bootstap Tabs with AngularJS

<div role="tabpanel" ng-app="tab" ng-controller="bootsTrapTab">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li ng-repeat="tab in tablist" role="presentation" ng-class="{active: activeTab === tab }">
      <a href="#" ng-click="tabUpdate(tab)" aria-controls="{{ tab }}" role="tab">{{ tab }}</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" ng-class="{active: activeTab === 'home'}" class="tab-pane" id="home">
      Home tab...
    </div>
    <div role="tabpanel" ng-class="{active: activeTab === 'profile'}" class="tab-pane" id="profile">
      Profile tab...
    </div>
    <div role="tabpanel" ng-class="{active: activeTab === 'messages'}" class="tab-pane" id="messages">
      Messages tab...
    </div>
    <div role="tabpanel" ng-class="{active: activeTab === 'settings'}" class="tab-pane" id="settings">
      Settings tab...
     </div>
  </div>

</div>
(function() {
  'use strict';

	angular
  	.module('tab', [])
    .controller('bootsTrapTab', bootsTrapTab);

	bootsTrapTab.$inject = ['$scope'];

	function bootsTrapTab($scope) {
    $scope.tablist = ['home', 'profile', 'messages', 'settings'];
    $scope.activeTab = 'home'; // Setting default tab view

    // This where the active tab happen.
    // @event = ng-click
    // @param = setting tab view
    $scope.tabUpdate = function(args) {
        $scope.activeTab = args;
    }
  }

})();

Demo: https://jsfiddle.net/do080Lmt/