Template replacement for the top state in angular-ui-router

I understand the existing system written in Redux + Angular1.5, ES6.

Given:

$stateProvider .state('app.section', { ... template: '<section-header></section-header>' redirectTo: 'app.section.levelOne' ... }) .state('app.section.levelOne', { ... template: '<section-levelOne></section-levelOne>' ... }) .state('app.section.levelOne.first', { ... template: '<section-levelOne-first></section-levelOne-first>' ... }) .state('app.section.levelOne.second', { ... template: '<section-levelOne-second></section-levelOne-second>' ... }); 

Description and Objective:

When we entered the necessary section of the application ( app.section ), we loaded the template ( section-header ), then the first level nesting section of the section ( levelOne ) was loaded - we received the section header with our controller and the main information of the section with our own.

In the first nesting level, we can go one more level down (for example, first) - at this moment it is necessary to change the section-header pattern, in particular, change the information in some places and connect new controls.

How can I do that? I have no other ideas but to transfer everything from section-header to the "lower" templates, no.

Who will help, who will tell?