How to determine the active tab?

Question

Angular

Hello everyone!)
There is such a structure.

<div class="tabbable">
        <ul class="nav nav-tabs catalog" id="main-tab">
            <li class="catalog active">
                <a href="#/catalog/" class="catalog" data-target="#catalog" data-toggle="tab">
                    <span class="tab_catalog"></span>
                    Каталог сервисов
                </a>
            </li>
            <li class="favorites">
                <a href="#/favorites" class="a_favorites" data-target="#favorites" data-toggle="tab">
                    <span class="tab_favorites"></span>
                    Избранное
                </a>
            </li>
            <li class="applications"">
                <a href="#/applications" class="a_applications" style="height: 20px;
padding-right: 0;
padding: 13px 0px 0px 14px;" data-target="#applications" data-toggle="tab">
                    <span class="tab_applications"></span>
                    Статусы заявок
                    <span class="tab_task">
                        1
                    </span>
                </a>
            </li>
        </ul>
        <div class="tab-content service-catalog">
            <ng-view></ng-view>
        </div>
    </div>

How can I make the catalog tab active when navigating to /catalog/1/1? And so that when the page is reloaded, the active tab remains the one on which it was before the page was reloaded?
Tried through the controller, but it did not work. The tab did not remain active along the path /catalog/1/1

catalogControllers.controller('TabController', ['$scope', '$location', '$http', '$rootScope',
    function($scope, $location, $http, $rootScope) {
        $scope.isActive = function(viewLocation)
        {
            console.log(viewLocation);
            console.log($location);
            return viewLocation === $location.path();
        };
}]);