title: How to convert bootstrap navbar to tabs using angular-ui?
body: <p>I want to convert bootstrap nav to tabs using angular-ui bootstrap, is there any way to make this change with minimal code change. I looked at angular-ui documentation but it looks like i would not be able implement with ui-router. Any idea ?</p>
  
  <p>main.html</p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
      &lt;div &gt;
          &lt;div class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li ui-sref-active="active"&gt;&lt;a ui-sref="app.dit"&gt;DIT&lt;/a&gt;&lt;/li&gt;
                  &lt;li ui-sref-active="active"&gt;&lt;a ui-sref="app.st"&gt;ST&lt;/a&gt;
                  &lt;li ui-sref-active="active"&gt;&lt;a ui-sref="app.uat"&gt;UAT&lt;/a&gt;&lt;/li&gt;
                  &lt;li ui-sref-active="active"&gt;&lt;a&gt;PROD&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>angular.module('loggingApp', [
          'ui.router',
          'ngFileSaver',
          'btford.socket-io',
          'ui.bootstrap',
          'ngSanitize',
          'timer'
  
      ]).config(function($stateProvider, $httpProvider, $urlRouterProvider) {
              'use strict'
              /*
               * This has to be here because the browsers will not catch the home
               * state without it
               */
              //$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/);
              $urlRouterProvider.otherwise(function($injector) {
                  var $state = $injector.get('$state');
                  $state.go('app.dit');
              });
  
              $stateProvider
                  .state('app', {
                      abstract: true,
                      url: '',
                      templateUrl: 'web/global/main.html',
                      controller: 'MainCtrl'
                  })
                  .state('app.dit', {
                      url: '/dit',
                      templateUrl: 'view/partials/dit.html',
                      controller: 'DitCtrl'
                  })
                  .state('app.st', {
                      url: '/st',
                      templateUrl: 'view/partials/st.html',
                      controller: 'StCtrl'
                  })
                  .state('app.uat', {
                      url: '/uat',
                      templateUrl: 'view/partials/uat.html',
                      controller: 'UatCtrl'
                  })
                  .state('app.prod', {
                      url: '/prod',
                      templateUrl: 'view/partials/prod.html',
                      controller: 'ProdCtrl',
                  });
  </code></pre>