The `content div of a tab` is not showing up.. I am using AngularJS to accomplish this

Question

In reference to the answer by Sergey Romanov

Only vertical tabs show up... The tab content div never gets displayed when I used his code. Here is my code

<div class="row">
<div class="col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-pills" role="tablist">
    <li ng-class="{'active': view_tab == 'tab1'}">
        <a class="btn-lg" ng-click="changeTab('tab1')" href="">My Tab 1</a>
    </li>
    <li ng-class="{'active': view_tab == 'tab2'}">
        <a class="btn-lg" ng-click="changeTab('tab2')" href="">My Tab 2</a>
    </li>
</ul>
</div>
<div class="col-sm-9">
<div class="tab-content">
    <div class="tab-pane" ng-show="view_tab == 'tab1'">
        This is tab 1 content
    </div>
    <div class="tab-pane" ng-show="view_tab == 'tab2'">
        This is tab 2 content
    </div>
</div>

var NavController = function ($scope,$http) {       

   $scope.changeTab = function(tab) {
        $scope.view_tab = tab;
    }
};
NavController.$inject = ['$scope','$http'];

angular.module('publisherApp').controller('NavController', NavController);

Answer 1

For Bootstrap tab content you need to set which tab is active:

var NavController = function($scope, $http) {

  $scope.changeTab = function(tab) {
    $scope.view_tab = tab;
  }
};
NavController.$inject = ['$scope', '$http'];

angular.module('app', []).controller('NavController', NavController);

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='NavController'>
  <div class="col-sm-3">
    <ul class="nav nav-tabs nav-stacked nav-pills" role="tablist">
      <li ng-class="{'active': view_tab == 'tab1'}">
        <a class="btn-lg" ng-click="changeTab('tab1')" href="">My Tab 1</a>
      </li>
      <li ng-class="{'active': view_tab == 'tab2'}">
        <a class="btn-lg" ng-click="changeTab('tab2')" href="">My Tab 2</a>
      </li>
    </ul>
  </div>
  <div class="col-sm-9">
    <div class="tab-content">
      <div class="tab-pane" ng-class="{active: view_tab == 'tab1'}">
        This is tab 1 content
      </div>
      <div class="tab-pane" ng-class="{active: view_tab == 'tab2'}">
        This is tab 2 content
      </div>
    </div>
  </div>
</div>