JSFiddle - React, Tailwind, and code Playground

by yazaki

HTML

<div ng-app="testapp">
    <div ng-controller="controller1">
        <input ng-model="newvalue">
        <button ng-click="change_title(newvalue)">Change Title</button>
    </div>
    <div ng-controller="controller2">
        <span>{{sharedTitle()}}</span>
    </div>
</div>

JavaScript

angular.module('testapp', [])
.service('sharedProperties', function(){
    var title = 'title';
    return {
        getTitle: function(){
            return title;
        },
        setTitle: function(val){
            title = val;
        }
    };
})
.controller('controller1', function($scope, sharedProperties){
    $scope.change_title = function(newvalue){
        sharedProperties.setTitle(newvalue);
    };
})
.controller('controller2', function($scope, sharedProperties){
    $scope.sharedTitle = function(){
        return sharedProperties.getTitle();
    };
})