JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <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('Ctrl1', function ($scope, userContext)
{
    $scope.firstName = userContext.firstName;
    $scope.lastName = userContext.lastName;
    $scope.user = userContext;
});

app.controller('Ctrl2', function($scope, userContext)
{
    $scope.firstName = userContext.firstName;
    $scope.lastName = userContext.lastName;
    $scope.user = userContext;
});

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

setTimeout(function() {
    console.log("change firstname");
    userDataContext.firstName= "Bart";
}, 3000);