JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row" ng-app="demo" ng-cloak>
    <div class="row" ng-controller="myFirstController">
        <div class="row">
            {{MyData.TestData}}
            <br />
            {{ServiceData.TestData}}
            <br />
            {{ProviderData.thingOnConfig}}
        </div>
        <div class="row">
            <input type="button" value='click here for update' ng-click="testFun()" />
        </div>
    </div>
    <div class="row" ng-controller="mySecondController">
        <div class="row">
            {{MyData.TestData}}
            <br />
            {{ServiceData.TestData}}
            <br />
            {{ProviderData.thingOnConfig}}
        </div>
    </div>
</div>

JavaScript

var myApp = angular.module('demo', []);

        // Factory Implementation
        myApp.factory('myFactory', function () {                      
            var service = {};
            service.TestData = 'This is default data from factory';
            return service;
        });

        // Service Implementation
        myApp.service('myService', function () {
            this.TestData = 'This is service';
        });

        // First Controller
        myApp.controller('myFirstController', function ($scope, myFactory, myService,myProvider) {
            $scope.ProviderData = myProvider;
            $scope.MyData = myFactory;
            $scope.ServiceData = myService;
            $scope.testFun = function () {
                $scope.MyData.TestData = 'This is new data from factory';
                $scope.ServiceData.TestData = 'New Service data';
                $scope.ProviderData.thingOnConfig = 'New thing from first controller';
            }
        });


        // Second Controller
        myApp.controller('mySecondController', function ($scope, myFactory, myService,myProvider) {
            $scope.ProviderData = myProvider;
            $scope.MyData = myFactory;
            $scope.ServiceData = myService;
        });

        myApp.provider('myProvider', function () {
            this.TestData = 'This is from provider';

            this.$get = function () {
                var that = this;
                return {
                    thingOnConfig: that.TestData
                }
            }
        });

        myApp.config(function (myProviderProvider) {
            myProviderProvider.TestData = 'This is new from config of provider';
        });