AngularJS - Use multiple controllers across bootstrap tabs - angularjs

Question

I'd like to divide content with bootstrap tabs. This works fine except the html breaks when I attach the ng-controller in parent elements. Is there a way to use html elements to insert ng-controller without affecting the hierarchy necessary to display tabs in bootstrap?
Working tab layout:
<div ng-app="myApp">
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">{{ tab1_content }}</div>
<div id="tab2" class="tab-pane fade in">{{ tab2_content }}</div>
<div id="tab3" class="tab-pane fade in">{{ tab3_content }}</div>
</div> <!-- all tab-content -->
</div> <!-- end myApp -->
How I'd like to use my controllers (breaks the tab displays by putting content in all tabs:
<div ng-app="myApp">
<div class="tab-content">
<ng-controller ng-controller="test_controller1">
<div id="tab1" class="tab-pane fade in active">{{ tab1_content }}</div>
<div id="tab2" class="tab-pane fade in">{{ tab2_content }}</div>
</ng-controller> <!-- end test_controller1 -->
<ng-controller ng-controller="test_controller2">
<div id="tab3" class="tab-pane fade in">{{ tab3_content }}</div>
</ng-controller> <!-- end test_controller2 -->
</div> <!-- all tab-content -->
</div> <!-- end myApp -->
Demo: https://jsfiddle.net/L2b4yLfa/

Answer 1

Is this acceptable?
I have initialized the same controller for two tabs. Since its a small window the code snippet output will show mobile view. click on run code snippet -> full page
angular.module('myApp', []);
angular.module('myApp').controller('test_controller1', function($scope) {
$scope.tab1_content = "Tab One Content";
$scope.tab2_content = "Tab Two Content";
});
angular.module('myApp').controller('test_controller2', function($scope) {
$scope.tab3_content = "Tab Three Content";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Title</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Testing</li>
</ul>
</div>
</div>
</nav>
<div ng-app="myApp">
<div class="tab-content">
<div id="tab1" ng-controller="test_controller1" class="tab-pane fade in active">{{ tab1_content }}</div>
<div id="tab2" ng-controller="test_controller1" class="tab-pane fade in">{{ tab2_content }}</div>
<div id="tab3" ng-controller="test_controller2" class="tab-pane fade in">{{ tab3_content }}</div>
</div> <!-- all tab-content -->
</div> <!-- end myApp -->
So in the future you would need to share data between the same controller for the two tabs using services.

Answer 2

My solution was to switch to angular bootstrap ui, not use the built-in uib-tabs and use $rootscope to handle the 'active_tab' value.
<style> .uib-tab.nav-item { display:none; } .nav-tabs { border-bottom: inherit; } </style>
<div ng-app="myApp">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
</div> <!-- end navbar-header -->
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<ul class="nav navbar-nav">
<li ng-class="{active: active_tab == 1}" ng-click="active_tab = 1">Tab 1</li>
<li ng-class="{active: active_tab == 2}" ng-click="active_tab = 2">Tab 2</li>
<li ng-class="{active: active_tab == 3}" ng-click="active_tab = 3">Tab 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Selected Tab: {{ active_tab }}</li>
</ul>
</div> <!-- end uib-collapse -->
</nav> <!-- end nav -->
<uib-tabset active="active_tab">
<ng-controller ng-controller="test_controller1">
<uib-tab index="1" heading="heading not displayed">1: {{ tab1_content }}</uib-tab>
<uib-tab index="2" heading="heading not displayed">2: {{ tab2_content }}</uib-tab>
</ng-controller>
<ng-controller ng-controller="test_controller2">
<uib-tab index="3" heading="heading not displayed">3: {{ tab3_content }}</uib-tab>
</ng-controller>
</uib-tabset>
</div>
Demo: https://plnkr.co/edit/36tkl3pCV7hgNz8rbpTq?p=preview