Is it possible to maintain active status on top level nav items when moving to child states?

I am having difficulties setting the active status against a child state within my routes:

    .state( 'sites', {
        url: '/sites',
        resolve: {
            auth: function resolveAuthentication( AuthResolver ) {
                return AuthResolver.resolve();
            }
        },
        templateUrl: 'app/components/sites/site.index.html',
        controller: 'SiteController',
        data: {
            requiresLogin: true,
        }
    })



    .state( 'sites.list', {
        url: '/list',
        resolve: {
            auth: function resolveAuthentication( AuthResolver ) {
                return AuthResolver.resolve();
            }
        },
        templateUrl: 'app/components/sites/site.list.html',
        controller: 'SiteListController',
        data: {
            requiresLogin: true,
        }
    })



    .state( 'sites.edit', {
        url: '/edit/:id',
        resolve: {
            auth: function resolveAuthentication( AuthResolver ) {
                return AuthResolver.resolve();
            },
            Site: ['$stateParams', 'SiteService',
                function( $stateParams, SiteService ) {
                    return SiteService.getOne( $stateParams.id );
                }],
            Locations: ['$stateParams', 'LocationService',
                function( $stateParams, LocationService ) {
                    return LocationService.get();
                }],
            SiteGroups: ['$stateParams', 'SiteGroupService',
                function( $stateParams, SiteGroupService ) {
                    return SiteGroupService.get();
                }]
        },
        templateUrl: 'app/components/sites/site.edit.html',
        controller: 'SiteEditController',
        params: {
            tab: 1
        },
        data: {
            requiresLogin: true,
        }
    })

My navigation is built from an array of objects:

    // Build the menu items
    $rootScope.menuItems = [
        {
            name: 'Dashboard',
            icon: 'fal fa-tachometer',
            url: 'home',
            authorisedGroups: ['Marketing'],
            divider: false,
            children: [],
            style: {},
            visible: true
        },
        {
            name: 'Sites',
            icon: 'fal fa-home',
            url: '',
            authorisedGroups: ['Marketing'],
            divider: false,
            children: [
                {
                    name: 'Maintenance',
                    icon: 'fal fa-edit',
                    url: 'sites.list',
                    visible: true
                },
                {
                    name: 'Site Groups',
                    icon: 'fal fa-chart-network',
                    url: 'siteGroups.list',
                    visible: true
                },
                {
                    name: 'Locations',
                    icon: 'fal fa-map-marker-alt',
                    url: 'locations',
                    visible: true
                }
            ],
            style: {},
            visible: true
        },
        ...

And for all objects within my navigation array, the active status works fine using the command:

ui-sref-active="active"

My issue occurs when I’m currently in sites.list and I click on an item to navigate to sites.edit. I am trying to maintain the active status against sites.list.

Example when in sites.list:

enter image description here

Example when clicking on an list item and moving to sites.edit:

enter image description here

Is this possible?

Source: AngularJS