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.factory('myConfig',function(){    
    return new constructorFun();
});

function constructorFun(){
    var myname = 'code_bunny';
    var age = 12;
    var id = 1;
    this.name = myname;
    this.age = age;
    this.getId = function(){
        return id
    }
}

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