AngularJS add new tabs to boostrap tab list - angularjs

Question

I try to implement a tabs nav bar in my app. I use Bootstrap3 and follow this example Boostrap Tabs and Pills.
I have one tab (#home) that is presented every Time. The other tabs i want to generate when i click on addInput() function. I.e tab1, tab2, tab3.
I dont know exactly how to get the combination togther. How can i create a list element with href="#menu1" for the navbar and fitting id="menu1" for the content inside tab.
Here is my example CodePen.io
<div ng-app="myApp" ng-controller="myCtrl">
<form>
<div class="form-group">
<label for="txtDevice" class="control-label">Form Field 1</label>
<input type="text" class="form-control" ng-model="info.name" id="txtDevice">
</div>
<div class="form-group">
<label for="txtIP" class="control-label">Form Field 2</label>
<input type="text" class="form-control" ng-model="info.ip" id="txtIP">
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
</ul>
<div class="form-group tab-content">
<div id="home" class="tab-pane fade in active">
<h4>Home</h4>
<p>content</p>
</div>
<div ng-repeat="site in info.sites track by $index">
<h4>tab {{$index +1}}</h4>
<p>content</p>
</div>
</div>
</form>
<button ng-click="addInput()">+add more inputs</button>
{{info | json}}
<hr>
tags = {{tags | json}}
</div>

Answer 1

There were about four things wrong with your pen, that I have fixed here (http://codepen.io/anon/pen/eBRwev?editors=1010)
Your tabs navigation did not include an ng-repeat for the tab headings
<ul id="myTabs" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li ng-repeat="site in info.sites track by $index" class="tab-pane fade in">
<a data-toggle="tab" href="#tab-{{$index}}" >Tab #{{$index}}</a>
</li>
</ul>
You forgot to include jQuery and Bootstrap JS libraries which are required to use the bootstrap tabs.
You have to call the following snippet of JS to activate the bootstrap click handling on the tabs
$('#myTabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});

Answer 2

You're looking something like this?
id="{{ 'menu' + $index }}"