JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='test'>
    
    <div ng-controller='main'>
        
        <p>{{ test }}</p>
        
        {{ service.message }}
        
    </div>
    
    <div ng-controller='main2'>
        
        <p>{{ test }}</p>
        
        <p>{{ service.message }}</p>
        <input type="text" ng-model='service.message'/>
    </div>
    
</div>

<script>
    (function() {
        if ( typeof Object.prototype.uniqueId == "undefined" ) {
            var id = 0;
            Object.prototype.uniqueId = function() {
                if ( typeof this.__uniqueid == "undefined" ) {
                    this.__uniqueid = ++id;
                }
                return this.__uniqueid;
            };
        }
    })();
    
    var app = angular.module('test',[])

    app.controller('main',function($scope,ServiceTest,serviceFactory){
        $scope.test = 'nice';
        $scope.service = ServiceTest.data;
    
        console.log("(Main) Service unique id "+ ServiceTest.uniqueId());
        console.log("(Main) Service unique id "+ serviceFactory.uniqueId());
    })
    
    app.controller('main2',function($scope,ServiceTest,serviceFactory){
        $scope.test = 'nice';
        $scope.service = ServiceTest.data;
    
        console.log("(Main2) Service unique id "+ ServiceTest.uniqueId());
        console.log("(Main2) Factory unique id "+ serviceFactory.uniqueId());
    })
    
    app.service('ServiceTest',function(){
        console.log('Init and just init');
    
        this.data = {
            message : "From service init"
        }
    })

 
    
    app.factory('serviceFactory',function(){
    
        console.log('show 2 times');
    
        return {
            chevere:"nice"
        } 
    });
    
</script>