Implement UI Bootstrap tabs in sidebar - angularjs

Question

I am using UI Bootstrap with AngularJS and I am trying to separate the vertical tabs into a sidebar using col-md-2 and col-md-10.
Currently the I have...
<uib-tabset active="activePill" vertical="true" type="pills">
<uib-tab heading="Tab 1">Vertical content 1</uib-tab>
<uib-tab heading="Tab 2">Vertical content 2</uib-tab>
<uib-tab heading="Tab 3">Vertical content 3</uib-tab>
</uib-tabset>
... which outputs ...
<div active="activePill" vertical="true" type="pills" class="ng-isolate-scope">
<ul class="nav nav-pills nav-stacked" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">
<li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope active" heading="Tab 1">
Tab 1
</li>
<li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope" heading="Tab 2">
Tab 2
</li>
<li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope" heading="Builds">
Tab 3
</li>
</ul>
<div class="tab-content">
<!-- ngRepeat: tab in tabset.tabs -->
<div class="tab-pane ng-scope active" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab">
<span class="ng-scope">Vertical content 1</span>
</div>
<!-- end ngRepeat: tab in tabset.tabs -->
<div class="tab-pane ng-scope" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab">
<span class="ng-scope">Vertical content 2</span>
</div>
<!-- end ngRepeat: tab in tabset.tabs -->
<div class="tab-pane ng-scope" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab">
<span class="ng-scope">Vertical content 3</span>
</div>
<!-- end ngRepeat: tab in tabset.tabs -->
</div>
</div>
I would like to have ...
<div active="activePill" vertical="true" type="pills" class="ng-isolate-scope">
<ul class="nav nav-pills nav-stacked col-md-2" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">
<!-- snip -->
</ul>
<div class="tab-content col-md-10">
<!-- snip -->
</div>
</div>
(added col-md-2 and col-md-10)

Answer 1

My team once tackled this and I don't think you can position them on the side (it has to do with how the directive is structured), so we had to remove the body directives, shrink the tabs container and show state views on a different div on the right.
<div class="col-sm-2">
<uib-tabset active="active" vertical="true" type="pills">
<uib-tab heading="Tab 1" select="selected(1)"></uib-tab>
<uib-tab heading="Tab 2" select="selected(2)"></uib-tab>
<uib-tab heading="Tab 3" select="selected(3)"></uib-tab>
</uib-tabset>
</div>
<div class="col-sm-10">
<div ng-show="selectedView===1">
Show what tab 1 is selected
</div>
<div ng-show="selectedView===2">
Show what tab 2 is selected
</div>
<div ng-show="selectedView===3">
Show what tab 3 is selected
</div>
</div>
Sample plunker
This is of course a simplified case, what we did was, using ui-router to show different states on the right, that made it a more "genuine" nav-bar and we didn't have to repeat the ugly <div ng-show="selectedView===#"> markup parts.