JSFiddle - React, Tailwind, and code Playground

by ChrisP

HTML

<div ng-app="worldApp">
    <div ng-controller="MessageController">
        <h1>{{ model.time }}</h1>
    </div>
    <div ng-controller="SecondController">
        <h1>{{ model.time }}</h1>
    </div>
</div>

JavaScript

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

// factory service
worldAppModule.factory('Master', function() {
        var master = {};
        master.models = [{'time':6,
                          'messages':['hello','world']},        
                         {'time':12,
                          'messages':['foo','bar']}];
        master.query = function(idx) {
            return master.models[idx];
        };
        return master;
 });
// controller
worldAppModule.controller('MessageController',
    function($scope, Master) {
        $scope.model = Master.query(1);
        $scope.message_number = 0;
        var clock = setInterval( function () {
            $scope.model.time--;
            $scope.$apply();
            if ($scope.model.time == 0) {
                clearInterval(clock);
                alert($scope.model.messages[$scope.message_number]);
            }
        }, 1000);
     }
 );
worldAppModule.controller('SecondController',
    function($scope, Master) {
        $scope.model = JSON.parse(JSON.stringify(Master.query(1)));;
    }
 );