JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>

<h2>Inter-controller service communication demo</h2>
<p>'The service 'nameService' is injected into the controllers, so that they can access it's its state (name property) and its methods (setFirstName() and setLastName()).

<fieldset ng:controller="FirstController">
    <legend>This lives in the FirstController</legend>
    <p>{{testName}} </p>
    <p><button ng:click="ns.setFirstName(newFirstNameInput)">Set first name</button><input type="text" name="newFirstNameInput" value="Liza" /></p>
</fieldset>

<fieldset ng:controller="SecondController">
    <legend>This lives in the SecondController</legend>
    <p>{{anotherTestName}}</p>
    <p><button ng:click="ns.setLastName(newLastNameInput)">Set lastname</button> <input type="text" name="newLastNameInput" value="Minelli" /></p>
</fieldset >

CSS

h2 {
 font-size: 20px;   
 font-weight: bold;
 margin-bottom:8px;
}

fieldset {
 border: 1px blue solid;   
 margin: 8px;   
 padding: 8px;
}

JavaScript

angular.service('nameService', function() {
      return {
         name :           {first:'Diana', last:'Ross'},
         setFirstName:    function(newFirstName) {
                                this.name.first = newFirstName;
                          },   
         setLastName:     function(newLastName) {
                                this.name.last = newLastName;
                          }   

      };
    }, {$inject: []});
    
    
    function FirstController(nameService) {
        this.ns = nameService;
        this.testName = this.ns.name;  
    }
    FirstController.$inject = ['nameService'];
    
    
    function SecondController(nameService) {
        this.ns = nameService;  
        this.anotherTestName = this.ns.name;  
    }
    SecondController.$inject = ['nameService'];