title: AngularJS' Regular tabs, about ng-transclude
body: <p>I'm new to AngularJS and I have some questions.</p>
  
  <p>I want to make a simple tab navigation that will use the angular <code>ng-view</code> 
  much like the example on the AngularJS homepage <a href="https://angularjs.org/" rel="nofollow">here</a>. (in the <strong>Create Components</strong> section).</p>
  
  <p>I want to have regular tabs, but when clicked, the ng-view to kick in and manage the template insertions.</p>
  
  <hr>
  
  <p>Here's some code:</p>
  
  <p><strong><code>index.html</code>:</strong></p>
  
  <pre><code>...
  &lt;tabs class="list-group"&gt;
      &lt;pane ng-repeat="pane in panes" class="list-group-item" title="{{pane.title}}" target="{{pane.target}}"&gt;I am a pane&lt;/pane&gt;
  &lt;/tabs&gt;
  ...
  </code></pre>
  
  <p><strong><code>script.js:</code></strong></p>
  
  <pre><code>angular.module('components', ['ngRoute'])
  
      .directive('tabs', function() {
          return {
              restrict: 'E',
              transclude: '.tabbable',
              scope: {},
              controller: function($scope, $location, $element) {
                  var panes = $scope.panes = [];
  
                  /**
                   * TODO
                   */
                  $scope.select = this.select = function(pane) {
                      angular.forEach(panes, function(pane) {
                          pane.selected = false;
                      });
                      pane.selected = true;
                  }
  
                  this.addPane = function(pane) {
                      panes.push(pane);
                  }
  
                  /* Set active pane */
                  this.currentPane = $location.path().slice(1);
              },
              /* TODO: get rid of display: none; */
              template:
                  '&lt;div class="tabbable"&gt;' +
                      '&lt;ul class="nav nav-tabs"&gt;' +
                          '&lt;li ng-repeat="pane in panes" ng-class="{active:pane.selected}"&gt;'+
                              '&lt;a href="#{{pane.target}}" ng-click="select(pane)"&gt;{{pane.title}}&lt;/a&gt;' +
                          '&lt;/li&gt;' +
                      '&lt;/ul&gt;' +
                      '&lt;div style="display: none;" ng-transclude&gt;&lt;/div&gt;' +
                  '&lt;/div&gt;',
              replace: true
          };
      })
  
      .directive('pane', function() {
          return {
              require: '^tabs',
              restrict: 'E',
              scope: { title: '@', target: '@', active: '@active' },
              link: function(scope, element, attrs, tabsCtrl) {
                  if (scope.target == tabsCtrl.currentPane) {
                      tabsCtrl.select(scope);
                  }
                  tabsCtrl.addPane(scope);
              },
              template:
                  '&lt;div class="tab-pane" ng-class="{active: selected}"&gt;&lt;/div&gt;',
              replace: true
          };
      })
  </code></pre>
  
  <p>My main point of confusion is the <code>ng-transclude</code>. I don't understand why I need a transcluded div when I don't want the tab content at all. The code above works, except that I don't like the part where I need to hide  the div (with <code>display: none;</code>). I think that's not they right way to go and if someone can explain this stuff to me, I'd be really grateful.</p>