JSFiddle - React, Tailwind, and code Playground

HTML

<div class="controller1" ng-controller="Ctrl1">
    <h4>Controller 1</h4>
    {{controller1Data}}
    <label class="label">Name:</label> 
        <input ng-model="controller1Data.name">
    <label class="label">Job:</label>
        <input ng-model="controller1Data.occupation">
    <label class="label"> Age: </label>
        <input ng-model="controller1Data.age">
</div>

<div class="controller2" ng-controller="Ctrl2">
    <h4>Controller 2</h4>
    {{controller2Data}}
    <label class="label">Name:</label> 
        <input ng-model="controller2Data.name">
    <label class="label">Job:</label>
        <input ng-model="controller2Data.occupation">
    <label class="label"> Age: </label>
        <input ng-model="controller2Data.age">
</div>

CSS

.label {
    display: block;
}
.label:first-child {
    margin-top: 30px;
}
.controller2 {
  width: 220px;  
  float: left;
  margin-right: 20px;
}

.controller1 {
   width: 220px;
   float: right;
    margin-left: 20px;
}

JavaScript

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

myApp.controller('Ctrl1', function($scope, sharedData) {
    $scope.controller1Data = sharedData;
});

myApp.controller('Ctrl2', function($scope, sharedData) {
    $scope.controller2Data = sharedData;
});

myApp.factory('sharedData', function() {
    var data = {
        name: 'Joe',
        occupation: 'Pizza Chain Owner',
        age: 35
    };
    
    return data;
});