Как заставить UI-Router открывать вкладку

Question

У меня есть ссылка на первой странице и при нажатии на эту ссылку; это идет на вторую страницу. У меня есть две вкладки на этой второй странице. Я хочу, чтобы вторая вкладка была активной, и пользователь должен непосредственно видеть содержимое этой вкладки.

Я пытался использовать ui-sref, но это заняло у меня только вторую страницу. Вот мой код:

Первая страница:

<a class="modal-trigger" ui-sref=""manage_schedule({'tab' : 'current'})">
    <div class="card-action" id="clients-bar">
        More Details
    </div>
</a>

Контроллер:

$stateProvider
.state('manage_schedule', {
url : "/manage/schedules/:tab",
templateUrl : "/static/manage_schedule.html",
})

manage_schedule.html

<div ng-controller="ManageSchedule">
    <div class="tabslayout rules">
        <ul class="tabs">
            <li class="tab col s4" ng-click="getPastRuns(profile_log_url)">
                <a href="#pastschedular" ng-class="{'active' : selectedTab=='past'}">
                    Past Runs({{runDetails.past_total}})
                    <i class="material-icons refresh-center" ng-if="selectedTab=='past'">refresh</i>
                </a>
            </li>
            <li class="tab col s4" ng-click="getRunningSchedules(running_schedules)">
                <a href="#runningschedular" ng-class="{'active' : selectedTab=='current'}">
                    <i class="material-icons refresh-center" ng-if="selectedTab=='current'">refresh</i>
                    Currently Executing Runs ({{runDetails.current_total}})
                </a>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("ul.tabs").tabs({});
    });
</script>

Answer 1

Маршрутизатор

$stateProvider
    .state('manage_schedule', {
        url: "/manage/schedules/:tab",
        templateUrl: "/static/manage_schedule.html",
        controller: "ManageSchedule"
    });

HTML

<div>
    <div class="tabslayout rules">
        <ul class="tabs">
            <li class="tab col s4" ng-click="getPastRuns(profile_log_url)">
                <a href="#pastschedular" ng-class="{'active' : selectedTab=='past'}">
                    Past Runs({{runDetails.past_total}})
                    <i class="material-icons refresh-center" ng-if="selectedTab=='past'">refresh</i>
                </a>
            </li>
            <li class="tab col s4" ng-click="getRunningSchedules(running_schedules)">
                <a href="#runningschedular" ng-class="{'active' : selectedTab=='current'}">
                    <i class="material-icons refresh-center" ng-if="selectedTab=='current'">refresh</i>
                    Currently Executing Runs ({{runDetails.current_total}})
                </a>
            </li>
        </ul>
    </div>
</div>

ManageSchedule Controller

controller('ManageSchedule', function ($scope, $stateParams) {
    $("ul.tabs").tabs({
        active: $stateParams.tab === "current" ? 1 : 0
    });
});