JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller="Controller1 as vm">
         <h3>This will never change:</h3>
        <button ng-click="vm.clickHandler()">Click Me!</button>
        <p>Values:</p>
        <p>id: {{vm.idValue()}}</p>
         
        <h3>This will change:</h3>
        <button ng-click="vm.changesClickHandler()">Click Me!</button>
        <p>Values:</p>
        <p>id: {{vm.changesIdValue()}}</p>
    </div>
</div>

JavaScript

var myApp = angular.module('myApp', []);
myApp.service('neverChanges', function () {
    this.id = 'Hello';
    var changeId = function () {
        console.log('pre change:' + this.id);
        this.id = 'World';
        console.log('post change:' + this.id);
    };

    return {
        id: this.id,
        changeId: changeId
    };
});
myApp.service('doesChange', function () {
    var data = {
        id: 'Foo'
    };
    var changeId = function () {
        data.id = 'Bar';
    };

    return {
        data: data,
        changeId: changeId
    };
});
myApp.controller('Controller1', ['neverChanges', 'doesChange', function (neverChanges, doesChange) {
    this.idValue = function() {
        return neverChanges.id;
    }
    this.changesIdValue = function() {
        return doesChange.data.id;
    }

    this.clickHandler = function () {
        console.log('Trust me, I did fire...');
        neverChanges.changeId();
        console.log('external post change:' + neverChanges.id);
    };
    this.changesClickHandler = function () {
        doesChange.changeId();
    };
}]);