JSFiddle - React, Tailwind, and code Playground

by Ian Brown

HTML

<div ng-app="Demo" ng-controller="DemoController">
    <div>
        
        <h4>{{service.name}}</h4>
        
        <p>Count: {{service.count}}</p>

        <button ng-click="service.addOneHundred()">Add 100</button>        
        
        <button ng-click="minusOneHundred()">Minus 100</button>        
    </div>
</div>

JavaScript

angular.module("Demo", [])
        .factory("DemoService", function($timeout) {

            function DemoService() {
                var self = this;
                self.name = "Demo Service";
            
                self.count = 0;
            
                self.counter = function(){
                    self.count++;
                    $timeout(self.counter, 1000);
                }
            
                self.addOneHundred = function(){
                    self.count+=100;
                }
            
                self.counter();
            }
    
            return new DemoService();
    
        })
        .controller("DemoController", function($scope, DemoService) {

            $scope.service = DemoService;
        
            $scope.minusOneHundred = function() {
                DemoService.count -= 100;
            }
        
        });