Директива AngularJS для вкладок пользовательского интерфейса BootStrap (проблемы с областью изоляции)

Я пытаюсь сделать директиву для работы с вкладками "Ускоренный пользовательский интерфейс".
Основная цель этой директивы - запомнить вкладки, которые были выбраны.
Я рассмотрел все решения там, и ни один из них не рассматривает эту проблему для вкладок, не установленных в контроллере:

<tabset>
  <tab heading="Customers" sctab>Customer tab content</tab>
  <tab heading="Sales" sctab>Sales Tab Content</tab>
</tabset>

Заметьте, что "sctab" - мое имя. Здесь у меня есть следующие работы:

• Щелкнув на вкладке, он получит заданный хэш URL-адреса в качестве названия заголовка вкладки
• Этот хэш запоминается, если вы нажмете ссылку, а затем вернитесь назад.
• При загрузке страницы укажите вкладку (или элемент), которая соответствует хешу

Однако на заключительном этапе я столкнулся с дорожным блоком:

• активация вкладки, которая соответствует хешу URL

Для этого я пробовал несколько вещей, которые вы можете увидеть в моем коде ниже. Ни один из них не работал.

Я считаю, что активное состояние задано переменной изоляции для переменной ui bootstrap tabs, называемой "active".

NgClass также связан с этой переменной:

ng-class="{active: active, disabled: disable}"

Поэтому в основном здесь я пытаюсь установить active = true для вкладки в попытке активировать вкладку (безрезультатно).
Прежде чем углубиться в подробности, я остановлюсь здесь, чтобы понять, есть ли у кого-то идеи, основанные на том, что я пробовал.
Вот моя директива:

angular.module('jonsmodule')
.directive('sctab', ['$rootScope', '$state', '$location', function($rootScope, $state, $location) {
    return {
        restrict: "A",
        link: function (scope, element, attrs) {

            /**
             * INITIALIZING THE ACTIVE TAB FROM HASH
             */
            scope.$watch(
                // watch for setting of the element heading (so we know when the bootstrap tabs are loaded)
                function () { return element.children().first('p')[0].innerText; },
                function (newValue, oldValue) {
                    // when ui-bootstrap tabs loaded
                    if (newValue !== oldValue) {

                        // if hash matches the tab heading name
                        if ($location.hash() == newValue.trim()) {

                            /**
                             * ******** NEED HELP HERE ************
                             * THE GOAL HERE IS TO SET THE TAB ACTIVE
                             * it does not work completely
                             * below is a list of things I tried
                             */

                            //$(element).tab('show'); // .tab is not a function

                            $(element).addClass('active'); // changes the class but the tab will not change

                            scope.$$childHead.active = true; // appears to not save

                            // attrs.$set('ngClass', {active: true, disabled: false}); // this does not appear to change anything

                        } else {
                            scope.$$childHead.active = false; // appears to save and the first tab is not selected
                        }

                    }

                }
            );

            /**
             * CHANGING THE TAB
             */
            // get the state (controller)
            var current_state = $state.current.name;

            // on tab change set the hash
            element.on('click', function () {
                var tabLabel = element.children().first('p')[0].innerText;
                history.pushState(null, null, current_state + '#' + tabLabel);
            });
        },
    };
}]);