JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="ParentCtrl">
    <div ng-controller="Ctrl1">
        <input type="text" ng-model="firstName"/>
        <input type="text" ng-model="lastName"/>
        <input type="text" ng-model="user.firstName"/>
        <ul>
            <li>{{firstName}}</li>
            <li>{{lastName}}</li>
            <li>{{user.firstName + ' ' + user.lastName}}</li>
        </ul>
    </div>
        <div ng-controller="Ctrl2">
        <input type="text" ng-model="firstName"/>
        <input type="text" ng-model="lastName"/>
        <ul>
            <li>{{firstName}}</li>
            <li>{{lastName}}</li>
            <li>{{user.firstName + ' ' + user.lastName}}</li>
        </ul>
    </div>
</div>

JavaScript

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

app.controller('ParentCtrl', function ($scope, userContext, $timeout) {
    $scope.firstName = userContext.firstName;
    $scope.lastName = userContext.lastName;
    $scope.user = userContext;
    $timeout(function() {
        console.log("change firstname");
        userContext.firstName= "Bart";
    }, 3000);
});

app.controller('Ctrl1', function ($scope, userContext) {});

app.controller('Ctrl2', function($scope, userContext) {});

app.value('userContext', { firstName: "John", lastName: "Doe" });