title: Set default tab to Angular.js tabs
body: <p>I have an <code>Angular.js</code> component which has a list of tabs. When a tab is clicked I assign an <code>ng-class</code>to it (active), so it gets highlighted. This is working fine, but I also want the first tab to be the default active one when a user first load the page, but at the moment nothing is highlighted when I load the page.</p>
  
  <p>Here's my component:</p>
  
  <pre><code>'use strict';
  
  angular.module('menuBar').component('menuBar', {
      templateUrl: 'menu-bar/menu-bar.template.html',
      controller: function menuBarController() {
          this.menus = [
              {
                  name: 'Tab1'
              }, {
                  name: 'Tab2'
              }, {
                  name: 'Tab3'
              }, {
                  name: 'Tab4'
              }, {
                  name: 'Tab5'
              }
          ];
  
          this.tab = this.menus[0].name;
  
          this.setTab = function (tabId) {
              this.tab = tabId;
          }
  
          this.isSet = function (tabId) {
              return this.tab === tabId;
          }
      }
  });
  </code></pre>
  
  <p>Here my html template:</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-collapse"&gt;
      &lt;div class="container"&gt;   
          &lt;ul class="nav nav-tabs"&gt;
              &lt;li ng-repeat="menu in $ctrl.menus" ng-class="{active:tab.isSet(menu.name)}"&gt;
                  &lt;a href ng-click="tab.setTab(menu.name)"&gt;{{menu.name}}&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Maybe something wrong at this line here where I'm trying to set my default tab?</p>
  
  <pre><code>this.tab = this.menus[0].name;
  </code></pre>
  
  <h2>Update: Plunker added</h2>
  
  <p><a href="https://plnkr.co/edit/FC5YhnbhkZWRE2wXlxSn?p=preview" rel="nofollow">Live preview here</a></p>