JSFiddle - React, Tailwind, and code Playground

by Mehulkumar Parmar

HTML

<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" />
    </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;
});