Ui-router with ng-repeat ui-sref-active does not work for nested child states

Question

I am having trouble keeping my main navigation active when I go to child states / views. I am using ui-router 0.2.13 and angular 1.3.15. This is a yo angular project, although I doubt it is probably irrelevant to this question.

header.html

<nav
    id="main-nav"
    ng-controller="NavigationCtrl"
    role="navigation"
>
    <ul class="list-unstyled list-inline">
        <li
            class="link"
            ui-sref-active="active"
            ui-sref="{{link.link}}"
            ng-repeat="link in navigation"
        >
            <a
                href
                ui-sref="{{link.link}}"
            >
                {{link.name}}
            </a>
        </li>
    </ul>
</nav>

navigation.ctrl

all there is is extracting nav json from my navigation service like this: $scope.navigation = Navigation.get()

Navigation service

just returns json like this:

[
      {
        link: 'home'
        , name: 'home'
      }
      , {
        link: 'audiences.list'
        , name: 'audiences'
      }
      , {
        link: 'campaigns.list'
        , name: 'campaigns'
      }
      , {
        link: 'performance'
        , name: 'performance'
      }
 ]

here is my app.js with my ui-router state configuration (I am only posting the part, which is a problem for brevity. The rest of my routes are pretty flat. This is one of the most difficult):

            /**
             * Audience Parent Page
             */
            .state('audiences',
                {
                    url: '/audiences'
                    , templateUrl: 'views/audiences/index.html'
                    , controller: 'AudiencesCtrl'
                }
            )

            /**
             * Audience List
             */
            .state('audiences.list',
                {
                    url: '/list'
                    , templateUrl: 'views/panel-list.html'
                    , controller: 'AudiencesListCtrl'
                    , sticky: true
                }
            )

            /**
             * Audience Edit
             */
            .state('audiences.edit',
                {
                    url: '/:id/edit'
                    , templateUrl: 'views/audiences/edit.html'
                    , controller: 'AudiencesEditCtrl'
                    , resolve: {
                        Audience: 'Audience'
                        , audience: function(Audience, $stateParams) {
                            return Audience.getAudienceById($stateParams.id)
                        }
                    }
                }
            )

            /**
             * Audience Create Parent for all three tabs
             */
            .state('audiences.create',
                {
                    url: '/create'
                    , templateUrl: 'views/audiences/create.html'
                    , controller: 'AudiencesCreateCtrl'
                    , deepStateRedirect: true
                    , sticky: true
                }
            )

            /**
             * Audience Create Tab From Existing Parent
             */
            .state('audiences.create.existing',
                {
                    url: '/existing/:subview'
                    , views: {
                        '': {
                            templateUrl: 'views/audiences/existing.html'
                            , controller: 'AudiencesCreateExistingCtrl'
                        }
                        , '[e-mail]': {
                            templateUrl: 'views/audiences/existing-list.html'
                            , controller: 'AudiencesCreateExistingListCtrl'
                        }
                        , '[e-mail]': {
                            templateUrl: 'views/audiences/existing-edit.html'
                            , controller: 'AudiencesCreateExistingEditCtrl'
                            , resolve: {
                                Audience: 'Audience'
                                , audience: function(Audience, $location) {
                                    if($location.search().id) {
                                        return Audience.getAudienceById($location.search().id)
                                    }
                                    else {
                                        return
                                    }
                                }
                            }
                        }
                    }
                }
            )

            /**
             * Audience Create Custom Tab Pages
             */
            .state('audiences.create.custom',
                {
                    url: '/custom'
                    , templateUrl: 'views/audiences/custom.html'
                    , controller: 'AudiencesCreateCustomCtrl'
                    , resolve: {
                        Audience: 'Audience'
                        , audiencex: function(Audience) {
                            return Audience.getAudienceById(1570)
                        }
                    }
                }
            )

            /**
             * Audience Create Upload Page
             */
            .state('audiences.create.upload',
                {
                    url: '/upload'
                    , templateUrl: 'views/audiences/upload.html'
                    , controller: 'AudiencesUploadCtrl'
                }
            )

:. , /, . , / .

: , , url/route , , , .

:

• ng-class="{ active: $state.includes('{{link.name}}') }" li
• ng-class="{ active: $state.$current.includes.{{link.name}} }"
• ng-class="{ active: ('{{link.link}}'|includedByState) }"
• parent : https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#parent-property-using-state-name-string
• - .

:

        $scope.isActive = function(name) {
            var path = $location.$$path.split('/')
            var root = path[1]
            return root === name ? true : false
        }

        $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
            var path = $location.$$path.split('/')
            var root = path[1]
            $scope.navigation.forEach(function(page) {
               page.active = $scope.isActive(page.name)
            })
        })

HTML:

ng-class="{active:isActive('{{link.name}}')}"

, (2- 5-) . , . , . , . , -, , . , , html vs, js - .

, github ui-router. , , - , , . , , - . https://github.com/angular-ui/ui-router/issues/1491.

? - ? ?