title: Tabs directive with Angular
body: <p>I am creating an Angular tabs directive which would be applied as follows:</p>
  
  <pre><code>&lt;div id="tabs-with-directive" data-tabs&gt;      
    &lt;ul class="tabs"&gt;
      &lt;li&gt;&lt;a href="#" data-tabs-link="1"&gt;One&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-tabs-link="2"&gt;Two&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;            
    &lt;div class="panes"&gt;
      &lt;div data-tabs-pane="1" class="pane active"&gt;One&lt;/div&gt;
      &lt;div data-tabs-pane="2" class="pane"&gt;Two&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>So clicking on One would show pane one, on two would show pane two, ...</p>
  
  <p>I created a working <a href="http://plnkr.co/edit/EqKuRfwnKi9j4IJMCrhh?p=preview" rel="nofollow">Plunker example without using a directive</a></p>
  
  <p>And I have a <a href="http://plnkr.co/edit/0gMuZ401yk7O99lbXNgE?p=preview" rel="nofollow">Plunker example using the directive I am trying to build</a>:</p>
  
  <pre><code>angular.module("app", [tabs]);   
  
  (function(angular) {
  
    'use strict';
  
    angular.module('tabs', []);
  
    angular.module('tabs')
      .directive('tabs', tabsDirective);
  
    function tabsDirective() {
      return {
          scope: true,
          restrict: 'A',
          controller: tabsController
      };
    }
  
    function tabsController($scope) {
  
      $scope.tabs = [];
  
      this.addTab = function (tab) {
          $scope.tabs.push(tab);
      };
  
      this.isTabActive = function (link) {
        for(var i = 0; i &lt; $scope.tabs.length; i++) {
          if ($scope.tabs[i].link == link)
            return $scope.tabs[i].active;
        }
        return false;
      };
  
      this.setTabToActive = function (link) {
        for(var i = 0; i &lt; $scope.tabs.length; i++) 
          $scope.tabs[i].active = $scope.tabs[i].link == link;
      };        
  
    }
  
    tabsController.$inject = ['$scope'];
  
    angular.module('tabs')
      .directive('tabsLink', tabsLinkDirective);
  
    function tabsLinkDirective() {
      return {
          scope: false,
          restrict: 'A',
          require: '^tabs',
          link: function (scope, element, attributes, controller) {
  
            var tab = { link: attributes.link, active: "false" };
            controller.addTab(tab);
  
            element.bind('click', function () {
              controller.setTabToActive(attributes.link);
            });
  
            scope.$watch('tabs', function () {
              element.toggleClass('active', controller.isTabActive(attributes.link));
            });
  
          }
      };
    }
  
    angular.module('tabs')
      .directive('tabsPane', tabsPaneDirective);
  
    function tabsPaneDirective() {
      return {
          scope: false,
          restrict: 'A',
          require: '^tabs',
          link: function (scope, element, attributes, controller) {
  
              scope.$watch('tabs', function () {
                element.toggleClass('active', controller.isTabActive(attributes.pane));
              });
  
          }
      };
    }
  
  })(angular);
  </code></pre>
  
  <p>Unfortunately this is not working and I cannot find what I am doing wrong.</p>
  
  <p>Could someone, please, help me out? </p>