How to make inner components inherit outer $scope?

Question

Angular

app.js

// подключаем главный компонент формы регистрации-авторизации
import loginComponent from './angular/directives/loginContent.js';
app.component('loginContent', loginComponent);

// подключаем компонент навигации
import navComponent from './angular/directives/navContent.js';
app.component('navigation', navComponent);

// подключаем контроллер
import LoginController from './angular/controllers/LoginController.js';

index.html
<login-content></login-content>
login.html

<div ng-controller="LoginCtr">
    
    <navigation></navigation>
    {{ $text }}

</div>

navigation.html

<li ng-repeat="el in menu" >
 {{ el.title }}
</li>

LoginCtr.js

/**
 * Контроллер, обрабатывающий компонент формы входа и регистрации
 * @param {object} $rootScope - общая область видимости шаблонов для приложения 
 * @param {object} $http - ajax-объект для работы с http-запросами
 * @param {object} $compile - объект для добавления нового DOM и связывания с обработчиками
 * @param {object} $scope - локальная область видимости шаблонов относительно компонента контроллера
 * @param {object} dataService - сервис, обменивающийся данными между контроллерами
 */
export default ($rootScope, $http, $compile, $scope, dataService) => {
    
   $scope.text = "hello world"; // выводится в компоненты
   $scope.menu = [
         {title: 1},
         {title: 2}
   ];
}

However, although the navigation component is connected and its html is visible in the debugger, the data itself is not displayed
.

Answer 1

pass data explicitly through bindings.