JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="serviceApp">

  <div ng-controller="myCtrl">
    name:{{name}}
    <br/>
    age:{{age}}
    <br/>
    love:{{love}}
    <br/>
    money:{{money}}
    <br/>
    id:{{id}}
  </div>
  <hr/>
  <div ng-controller="myOtherCtrl">
    name:{{name}}
    <br/>
    love:{{love}}
    <br/>
  </div>
  <hr/>

</body>

CSS

* {
      font-family:'MICROSOFT YAHEI'
    }

JavaScript

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

serviceApp.controller('myCtrl',function($scope,myConfig){
    $scope.name = myConfig.name;
    $scope.love = myConfig.love;
    $scope.age = myConfig.age;
    $scope.money = myConfig.money;
    $scope.id = myConfig.getId();
    $scope.$watch(myConfig.love,function(){$scope.love = myConfig.love;});
});

serviceApp.controller('myOtherCtrl',function($scope,myConfig){
    $scope.name = myConfig.name;
    $scope.love = myConfig.love;
    angular.extend(myConfig,{love:'zxg'});
    $scope.$watch(myConfig.love,function(){$scope.love = myConfig.love;});
});

serviceApp.provider('myConfig',function(){
   return {
       $get:function(){
           var myname = 'code_bunny';
           var age = 12;
           var id = 1;
           return {
               name: myname,
               age: age,
               getId: function(){
                   return id
               }
           }
       }
   }
});

serviceApp.config(function($provide){
    $provide.decorator('myConfig',function($delegate){
        console.log($delegate);
        $delegate.money = '100w';
        return $delegate
    })
});