JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="demo" ng-controller="PageController">
    
    {{ page.time }}
    
    <div ng-controller="UsernameController">
        {{ user.name }}
    </div>
    
</div>

JavaScript

var app = angular.module( 'demo', [] );

function_that_fetch_for_username = function() {
    //Some function that fetch for username assynchronously
};

app.controller( 'PageController', function ( $scope ) {

	//Initial data
	$scope.page = {};
    $scope.page.time = Date();
    function_that_fetch_for_username();
    //How can I make the UsernameController to update its view from this Controller
   
});

app.controller( 'UsernameController', function( $scope ) {
    //Initial data
    $scope.user = {};
    $scope.user.name = "";
    
    //How can I automatically updated the $scope.user.name in view as soon as the PageController receives the information about the username?
    
});