JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="MyApp">
    <div ng-controller="DefaultController">
        <p>Service version: <em>{{service.version}}</em></p>
        <div>
            <label>Title</label>: <input ng-model="article.title" />
            <label>Body</label>: <input ng-model="article.body" />
        </div>
        <p><button ng-click="service.save(article)">Save</button></p>
    </div>
    
    <div ng-controller="OtherController">
        <p>Service version: <em>{{service.version}}</em></p>
        <div>
            <label>Title</label>: <input ng-model="article.title" />
            <label>Body</label>: <input ng-model="article.body" />
        </div>
        <p><button ng-click="service.delete(article)">Delete</button></p>
    </div>
</div>

JavaScript

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

myApp.controller('DefaultController', function ($scope, ArticleService) {
    $scope.article = ArticleService.emptyArticle();
    $scope.service = ArticleService;
});

myApp.controller('OtherController', function ($scope, ArticleService) {
    $scope.article = ArticleService.articles[0];
    $scope.service = ArticleService;
});

myApp.service('ArticleService', function () {
    return new (function () {
        this.version = '0.0.1';
        this.articles = [{title:'Hello World', body:'Just saying hello.'}];
        
        this.emptyArticle = function () {
            return {title:'Untitled', body:''};
        };
        
        this.save = function (article) {
            alert('Saving article: ' + article.title);
        };
        
        this.delete = function (article) {
            alert('Deleting article: ' + article.title);
        };
    })();
});

angular.bootstrap(document, ['MyApp']);