JSFiddle - React, Tailwind, and code Playground

by anpsince83

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<div ng-controller="InputCtrl">
    
<h4>Primitive</h4>

    <div>
        <input type="text" ng-model="text1">
        <button ng-click="saveText(text1)">Save Text</button>
    </div>
    
<h4>Object</h4>

    <div>
        <input type="text" ng-model="textObj.text1">
        <br>
        <input type="text" ng-model="textObj.text2">
        <br>
        <button ng-click="saveObj(textObj)">Save Object Text</button>
    </div>
</div>
<hr>
<div ng-controller="OutputCtrl">
    <strong>Text:</strong> {{ myService.text }}<br>
    <strong>Obj Text:</strong> {{ myService.objText }}
</div>

JavaScript

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

myApp.service('myService', function () {
    this.text = '';
    this.objText = {};

    this.setText = function (text) {
        this.text = text;
    };

    this.setObjText = function (obj) {
        this.objText = obj;
    };
});

myApp.controller('InputCtrl', ['$scope', 'myService', function ($scope, myService) {
    $scope.textObj = {};
    $scope.saveText = function (text) {
        myService.setText(text);
    }
    $scope.saveObj = function (obj) {
        myService.setObjText(obj);
    }
}]);

myApp.controller('OutputCtrl', ['$scope', 'myService', function ($scope, myService) {
    $scope.myService = myService;
}]);