index.html

<div class="container"  ng-controller="MainCtrl">
  {{tabs|json}}
  <my-tabs>
  </my-tabs>
</div>

main.js

'use strict';

angular.module('tabsApp')
  .controller('MainCtrl',function ($scope) {
    $scope.tabs = [
      {head: "tab1", content: "content1"},
      {head: "tab2", content: "content2"},
      {head: "tab3", content: "content13"}
    ];
  }).directive('myTabs', function () {
    return {
      templateUrl: '/scripts/tabs.html',
      replace: true,
      restrict: 'E',
      link: function (scope, element, attrs) {
      },
      controller: function ($scope) {

      }
    };
  });

tabs.html

<div class="bs-example bs-example-tabs">
  <ul id="myTab" class="nav nav-tabs">
    <li ng-repeat="tab in tabs"><a href="#{{tab.head}}" data-toggle="tab">{{tab.head}}</a></li>
  </ul>
  <div id="myTabContent" class="tab-content">
    <div ng-repeat="tab in tabs" class="tab-pane fade in" id="{{tab.head}}">
     {{tab.content}}
    </div>
  </div>
</div>