Change selected menu according to URL segment in Angular

Question

I’m developing a project and I’m using Angular, I need when accessing the internal page, the menu is selected, until then beauty, but the problem is when the internal page contains Lug or some internal, follow code I’m using:

Html:

 <li class="waves-effect waves-light" ng-class="(url_atual == '/module9'? fundo_selecionado:fundo_normal)">
                        <img src="app/template/img/col.png">
                        <p>Colaboradores</p>
                    </li>

Controller:

        $scope.url_atual = $location.url();
        $scope.fundo_selecionado = 'fundo_selecionado';
        $scope.fundo_normal = 'fundo_normal';

CSS:

.fundo_selecionado{
  background-color: #fff!important;
}
.fundo_normal{
  background-color: $cor_cinza!important;
}

As you can see, I use an ng-class and if the current url is equal to the module accessed, it plays the selected base_class, otherwise it plays the normal base_class. The problem is when I have internal module, such as /module9/internal or module9/Lug that there it does not keep the selected menu. Does anyone have a hint on how to keep the selected menu even in the built-in modules?

Follows a route system:

   function Config($routeProvider) {
    $routeProvider
    .when('/module9', {
        templateUrl: 'module9/template/index.html',
        controller: 'module9Controller',
        controllerAs: 'vm'
    })
    .when('/module9/:module9Slug', {
        templateUrl: 'module9/template/interna.html',
        controller: 'module9Controller',
        controllerAs: 'vm'
    })
    .when('/module9/adicionar/add', {
        templateUrl: 'module9/template/adicionar.html',
        controller: 'module9Controller',
        controllerAs: 'vm'
    });
}

Answer 1

Try to do this.

<li class="waves-effect waves-light" ng-class="(url_atual == '/module9' || url_atual == '/module9/interna ou module9/slug' ? fundo_selecionado:fundo_normal)">
    <img src="app/template/img/col.png">
    <p>Colaboradores</p>
</li>

Answer 2

The momentary solution was to identify each menu with a class and make a case by checking the menu and executing the function when the route is changed, follow code:

vm.MenuInternas = function(){
            $timeout(function() {
                switch($location.path()) {
                    case '/':
                        $('.menu a').removeClass('active-Menu');
                    break;
                    case '/quemsomos':
                        $('.menu a').removeClass('active-Menu');
                        $('.quemsomos_').addClass('active-Menu');
                    break;
                    case '/solucoes':
                        $('.menu a').removeClass('active-Menu');
                        $('.solucoes_').addClass('active-Menu');
                    break;
                    default: 
                    break;
                }
            });
        }
        vm.MenuInternas();

Executing function in the route change:

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
    vm.MenuInternas();
})