JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller="Main">
        <ul>
            <li>{{mapCoord}}</li>

        </ul>
    </div>    
    <div ng-controller="Map">
        <ul>

            <li>{{mapCoord}}</li>

        </ul>

    </div>
</div>

JavaScript

var app = angular.module('myApp', [])
app.service('sharedProperties', function () {
    var mapCoord= 'Test';

    return {
        getProperty: function () {
            return mapCoord;
        },
        setProperty: function(value) {
            mapCoord= value;
        }
    };
});

app.controller('Main', function($scope, sharedProperties) {
    $scope.mapCoord= sharedProperties.setProperty("Main"); 
    $scope.mapCoord = sharedProperties.getProperty();
});

app.controller('Map', function($scope, sharedProperties) {
    $scope.mapCoord= sharedProperties.getProperty(); 
});