JSFiddle - React, Tailwind, and code Playground

by bnjasim

HTML

<body ng-app="my-module">
<div ng-controller="TestCtrl as test">
        <input type="text" ng-model="test.name" />
        <a ng-click="test.changeName()" href="#">Change Name</a>
        <div>{{test.name}}</div>
</div> 
</body>

JavaScript

var app = angular.module('my-module', []);

app.factory('testService', function() {
    var name = 'Max';

    var getName = function() {
        return name;
    }

    var setName = function(val) {
        name = val;
    } 

    return {getName:getName, setName:setName};
});

app.controller('TestCtrl', function (testService) {
    var vm = this;
    
    vm.changeName = function () {
        vm.name = new Date();
    }
    
    Object.defineProperty(this, "name", {
        enumerable: true,
        configurable: false,
        get: function() {
            return testService.getName();
        },
        set: function (val) {
            testService.setName(val);
            alert(vm.name);
        }
    }); 
  
});