JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div class="" data-ng-app="myApp">
    <div data-ng-controller="c1" style="width: 50%; float: left;">
        <h3>Controller 1:</h3>
        <strong>s1 object:</strong> {{ Input.name }}
        <br /><input type="text" data-ng-model="Input.name" />
        <br />
        <br /><strong>s1 property:</strong> {{ name }}
        <br /><input type="text" data-ng-model="name" />
    </div>
    <div data-ng-controller="c2" style="width: 50%; float: right;">
        <h3>Controller 2:</h3>
        <strong>s1 object:</strong> {{ Input.name }}
        <br /><input type="text" data-ng-model="Input.name" />
        <br />
        <br /><strong>s1 property:</strong> {{ name }}
        <br /><input type="text" data-ng-model="name" />
        <button ng-click="change()">change</button>
    </div>
</div>

JavaScript

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

myApp.service('s1', function() {
    this.Input = {
        name: 'John'
    };
    
    this.name = 'Doe';
});

myApp.controller('c1', function($scope, s1) {
    $scope.Input = s1.Input;
    $scope.name = s1.name;
});

myApp.controller('c2', function($scope, s1) {
    $scope.Input = s1.Input;
    $scope.name = s1.name;
    
    $scope.change = function() {
        console.log("s1.name = "+s1.name);
        s1.name = "ciao";
        console.log("s1.name = "+s1.name);
    };
});