UPDATE. Got it to work using this idea

https://stackoverflow.com/questions/36011804/uib-tabs-set-second-tabs-is-active


Hi everybody,

I wrote this code today:

 let lastCharacter = url.substr(url.length-1,1);
                    switch (lastCharacter)
                    {
                         case '1':
                         case '2':
                         case '3':
                         case '4': {
                             $scope.selectView('seasonSchedule' + lastCharacter);
                             break;
                         }
                         default:
                             break;
                    };

I don't really like it and I also have a problem. The correct tab is indeed selected, but the active class remains on the first (General tab).

Here is how my html looks like:

<div class="widget-content scrollable-content">
                <div class="padd scrollable widget-resize">
                    @Html.Partial("_EditFormAlerts")
                    <div class="col-xs-12 detailPanelNavContainer">
                        <uib-tabset vertical="false" type="pills">
                            <uib-tab heading="@Labels.general" select="selectView('editItemGeneralPrefs')"></uib-tab>
                            <uib-tab heading="@Labels.taxRatesAndFees" select="selectView('taxRatesAndFees')"></uib-tab>
                            <uib-tab heading="@String.Format(Labels.seasonScheduleXDates, "1")" select="selectView('seasonSchedule1')"></uib-tab>
                            <uib-tab heading="@String.Format(Labels.seasonScheduleXDates, "2")" select="selectView('seasonSchedule2')"></uib-tab>
                            <uib-tab heading="@String.Format(Labels.seasonScheduleXDates, "3")" select="selectView('seasonSchedule3')"></uib-tab>
                            <uib-tab heading="@String.Format(Labels.seasonScheduleXDates, "4")" select="selectView('seasonSchedule4')"></uib-tab>
                        </uib-tabset>
                    </div>
                    <div class="col-xs-12 panel-container">
                        <div data-ui-view data-autoscroll="false"></div>
                    </div>
                </div>
            </div>

and the selectView function is a simple:

 $scope.selectView = function (viewName) { 
                $log.debug("Selecting view " + viewName);
                    $state.go( viewName);               
            };

If I come to that page normally from the menu and then start clicking on the tabs, all works well. But if I try to go to the correct tab from another page using code like

window.open(linkUrl, '_blank');

then originally I was landing on the first page instead of the tab I wanted. I added the code today to fix that problem, so now I am landing on the right page, but the active tab is still the first one.

Do you see my problem and have some ideas how to solve it? I was also trying to use state parameters here, but that didn't work at all, so I switched to the idea I'm showing now.

Thanks in advance.