>I see. Well switching to angular-ui tabs rather than bootstrap.js would certainly get rid of jQuery errors since angular-ui doesn't use jQuery :-}

Hi Viv,

I switched to tabs as shown in this link http://angular-ui.github.io/bootstrap/ (scroll to vertical tabs example) My markup is now very simple:

 <tabset vertical="true" type="pills">
                                    <tab heading="@Labels.general" select="selectView('general')">

                                    </tab>
                                        
                                    <tab heading="@Labels.contact" select="selectView('contact')">

                                    </tab>
                                        
                                    <tab heading="@Labels.invoices" ng-show="!isNew" select="selectView('invoices')">

                                    </tab>
                                    <tab heading="    @Labels.payInvoices" 
                                    ng-show="!isNew" select="selectView('invoicesToBePaid')">
                                    </tab>
                                    <tab heading="    @Labels.applyFees"
                                         ng-show="!isNew" select="selectView('applyFees')">
                                    </tab>
                                    <tab heading="@Labels.userDefined"
                                         ng-show="!isNew" select="selectView('userDefined')">
                                    </tab>
                                    <tab heading="@Labels.securityRestrictions"
                                         ng-show="!isNew" select="selectView('security')">
                                    </tab>
                                    <tab heading="@Labels.web"
                                         ng-show="!isNew" select="selectView('web')">
                                    </tab>
                                        @*<li data-ui-sref-active="active" class="active" data-ng-show="!isNew">
                                            <a data-toggle="pill" href="" data-ui-sref=".invoicesToBePaid">    @Labels.payInvoices</a>
                                        </li>
                                        <li data-ui-sref-active="active" class="active" data-ng-show="!isNew">
                                            <a data-toggle="pill" href="" data-ui-sref=".applyFees" ng-class="{true: 'invalid-tab', false: ''}[form.applyFees.$invalid]">    @Labels.applyFees</a>
                                        </li>

                                        <li data-ui-sref-active="active" class="active">
                                            <a data-toggle="pill" href="" data-ui-sref=".userdefined">@Labels.userDefined</a>
                                        </li>
                                        <li data-ui-sref-active="active" class="active">
                                            <a data-toggle="pill" href="" data-ui-sref=".security">@Labels.securityRestrictions</a>
                                        </li>
                                        <li data-ui-sref-active="active" class="active">
                                            <a data-toggle="pill" href="" data-ui-sref=".web">@Labels.web</a>
                                        </li>*@
</tabset>

I have few issues:

1. I am not sure how to achieve the same functionality of Apply Fees and Pay Invoices to have few tabs in front of the tab text.

2. I am not seeing the exact blue class highlight when the tab is activated. In my case it remains the same as if I would not use pill. I am wondering what exactly may cause the difference - we're using this version of ui: ui-bootstrap-0.9.0.js

Update. I confirmed that if I switch to the current version of ui file, the highlight works correctly. So, our old macadmine there is messing us up.


Do you get correct highlight with the similar code?

Thanks in advance.