Dev Stack Source

Answer : I'm not sure that you can apply ng-class to tabs like that. After trying and failing I decided to look at the bootstrap-ui source for tabs and made an interesting discovery related to the tab heading attribute. Apparently you can put html in the heading section if you place the tab-heading as a child to a tab element. Check out the tabheading directive in here. This is the example they show: <tabset> <tab> <tab-heading><b>HTML</b> in my titles?!</tab-heading> And some content, too! </tab> <tab> <tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading> That's right. </tab> </tabset> In your case I think you might be able to do something like this to get the same effect: <tab ng-repeat="tab in tabs" active="tab.active"> <tab-heading>{{tab.title}} <span ng-show="tab.new">new<...

Answer : Another solution is to create something like this <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-p...

Answer : Your problem lies in the ui-if part. Angular-ui creates a new scope for anything within that directive so in order to access the parent scope, you must do something like this: <textarea ng-model="$parent.noticeText"></textarea> Instead of <textarea ng-model="noticeText"></textarea> This issue happened to me while not using the ng-if directive on elements surrounding the textarea element. While the solution of Mathew is correct, the reason seems to be another. Searching for that issue points to this post, so I decided to share this. If you look at the AngularJS documentation here https://docs.angularjs.org/api/ng/directive/textarea , you can see that Angular adds its own directive called <textarea> that "overrides" the default HTML textarea element. This is the new scope that causes the whole mess. If you have a variable like $scope.myText = 'Dummy text'; in your controller and bind that to...