Angular Bootstrap tabs not getting input field - angularjs

Question

Facing a weird issue, where a simple text field value is not getting printed when using tabset. Wrote a sample to demo the same. Please check it below link
sample link
<tabset>
<tab heading="Static title">Testing input
<input ng-model="nameStr" value="">
<button class="btn btn-default btn-lg " type="button" ng-click="callMe()" >Test callme</button>
</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
{{tab.content}}
</tab>
<tab select="alertMe()">
<tab-heading>
<i class="glyphicon glyphicon-bell"></i> Alert!
</tab-heading>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
</tabset>
Do suggest, what would have been missed out.
Thanks in advance.

Answer 1

There is some questions about angular-ui way of encapsulate controllers inside it's directives (the idea is to have different controllers for different tasks). The problem, to access your "original" controller (and not the ones in the ui-bootstrap directive) you have to use the $parent in your view. Because the current $scope inside tabset is pointing to another controller.
So, it will become
<input ng-model="$parent.nameStr" value="">
I couldn't find the right explanation in the angular-ui repo, but this seems to get some ideas.
https://github.com/angular-ui/bootstrap/issues/2971
Older Answer
You can replace the $scope.nameStr inside the $scope.callMe for this.nameStr.
http://plnkr.co/edit/cUUQ9FQ0oEOmIltQTS2f?p=preview

Answer 2

My solution:
$scope.name = {};
$scope.callMe = function(){
alert('title ->'+$scope.name.str);
}
In html:
<input ng-model="name.str" value="">
Angular works much better this way. Using dot properties.