title: angularui tabs setting active tab and its css
body: <p>I am currently having issues styling an angular directive of tabs.  I am trying to set an active tab and deselect all other tabs.  However, I am not having any luck.  I have tried using css hosted by bootstrap, but that didn't fix the issue.  I am not sure where to start, but a point in the right direction would be helpful.  </p>
  
  <p>I made a Plunker to demonstrate my issue:
  <a href="http://plnkr.co/edit/ZjrG8uHS4sHq3pxgGVLu?p=preview" rel="nofollow">http://plnkr.co/edit/ZjrG8uHS4sHq3pxgGVLu?p=preview</a></p>
  
  <p>And the code below:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
  
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;AngularJS Plunker&lt;/title&gt;
  &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"&gt;&lt;/script&gt;
  &lt;script data-require="angular-animate@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="MainCtrl" class="smooth_transition"&gt;
  &lt;tabset&gt;
    &lt;tab heading="test1" &gt;
      &lt;div class="tab-body" &gt;
          test1 should be red
          &lt;br/&gt;
          test2 should be white
      &lt;/div&gt;
    &lt;/tab&gt;
    &lt;tab heading="test2"&gt;
      &lt;div class="tab-body" &gt;
          test1 should be white
          &lt;br/&gt;
          test2 should be red
      &lt;/div&gt;
    &lt;/tab&gt;
  &lt;/tabset&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>var app = angular.module('plunker',["ngAnimate"]);
  
  app.controller('MainCtrl', function($scope) {
     $scope.name = 'World';
  })
  .directive('tab', function () {
      return {
          restrict: 'E',
          transclude: true,
          template: '&lt;div role="tabpanel" ng-show="active" ng-transclude  class="smooth_transition"&gt;&lt;/div&gt;',
          require: '^tabset',
          scope: {
              heading: '@'
          },
          link: function (scope, elem, attr, tabsetCtrl) {
              scope.active = false;
              tabsetCtrl.addTab(scope)
          }
      }
  })
  .directive('tabset', function () {
      return {
          restrict: 'E',
          transclude: true,
          scope: {},
          templateUrl: 'tabset.html',
          bindToController: true,
          controllerAs: 'tabset',
          controller: [ function () {
              var self = this;
              self.tabs = [];
              self.addTab = function addTab(tab) {
                  self.tabs.push(tab);
  
                  if (self.tabs.length === 1) {
                      tab.active = true;
                  }
              };
              self.select = function (selectedTab) {
                  angular.forEach(self.tabs, function (tab) {
                      if (tab.active &amp;&amp; tab !== selectedTab) {
                          tab.active = false;
                      }
                  });
                  selectedTab.active = true;
              };
          }]
      };
  });
  </code></pre>
  
  <p>tabset.html</p>
  
  <pre><code>&lt;div role="tabpanel" class="smooth_transition"&gt;
    &lt;ul class="nav nav-tabs" role="tablist" class="smooth_transition"&gt;
      &lt;li role="presentation"
          ng-repeat="tab in tabset.tabs" class="smooth_transition"&gt;
          &lt;a href=""
             role="tab"
             ng-click="tabset.select(tab)"&gt;{{tab.heading}}&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;ng-transclude&gt;
    &lt;/ng-transclude&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>.smooth_transition.ng-hide {
      opacity: 0;
  }
  
  .smooth_transition.ng-hide-add {
      position: absolute;
      width: 100%;
  }
  
  .smooth_transition.ng-hide-remove {
      transition: all linear 1s;
      position: absolute;
      width: 100%;
  }
  
  /*nav css*/
  .nav {
      padding-left: 0;
      margin-bottom: 0;
      list-style: none;
      height: 50px;
  }
  
  .nav &gt; li {
      position: relative;
      display: block;
  }
  
  .nav &gt; li &gt; a {
      position: relative;
      display: block;
      padding: 10px 15px;
  }
  
  .nav-tabs {
      width: 100%;
  }
  
  .nav-tabs &gt; li {
      background: white;
      border: solid 1px black;
      float: left;
      margin-bottom: -1px;
  }
  
  .nav-tabs &gt; li &gt; a {
      margin-right: 2px;
      line-height: 1.42857143;
      border: 1px solid transparent;
      border-radius: 4px 4px 0 0;
  }
  
  .tab-body {
      width: 100%;
      border: solid 1px black;
  }
  
  .nav-tabs &gt; li &gt; a .active {
      background: red;
  }
  </code></pre>