<div class="col-lg-3 col-md-3 panel-container"> <tabset vertical="true" type="pills"> <tab heading="@Labels.general" select="selectView('general')" > </tab> <tab heading="@Labels.passes" select="selectView('guestPasses')"> </tab> <tab heading="@Labels.history" select="selectView('guestActivity')"> </tab> <tab heading="@Labels.userDefined 1" select="selectView('userDefined1')" > </tab> <tab heading="@Labels.userDefined 2" select="selectView('userDefined2')" > </tab> </tabset> </div> <div class="col-lg-9 col-md-9 panel-container"> <div data-ui-view data-autoscroll="false"></div> <div data-ui-view="guestPasses" data-autoscroll="false"></div> </div>And I've noticed the behavior change I am wondering if I should live with or can do something about - if I type something that makes control invalid (say, in the text allowing 10 characters type 20), I can see the invalid message when I am on this tab. When I switch to another tab and then go back, that control goes to the original empty state.
$scope.selectView = function (viewName) { if ($scope.isNew) { $state.go('new.' + viewName); } else { $state.go('edit.' + viewName); } };and all the ui-views are defined at the top.