JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='mulipleCtrlApp'>
    <div ng-controller='titleCtrl'> <pre>
        Title Controller
        
        {{myVar}}
        <button ng-click='testchange()'>click to change</button>
        </pre>

    </div>
    <div ng-controller='settingCtrl'> <pre>
        Setting Controller        
        
        {{myVar}}
        </pre>

    </div>
</div>

JavaScript

angular.module('mulipleCtrlApp', [])
    .service('shareService', function () {
    return {
        title: 'test',
        settings: {
            color: 'black',
            font: 'verdana'
        }
    };
})
    .controller('titleCtrl', function ($scope, shareService) {
    $scope.myVar = shareService;
    $scope.testchange = function () {
        $scope.myVar.title = 'Completed test';
    };
})
    .controller('settingCtrl', function ($scope, shareService) {
    $scope.myVar = shareService;
});