JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="hello-world">
    <div ng-controller="helloController as hi">
        
<h1 style="text-align: center" ng-style="{'color':hi.myColor}">Hello, {{hi.myName}}</h1>

    </div>
</body>

JavaScript

(function () {
    var app = angular.module('hello-world', []);

    app.controller('helloController', function ($scope, $interval) {
        // Create an array of names.
        var names = [
            "Jed",
            "Leo",
            "Josh",
            "Toby",
            "Sam",
            "CJ",
            "Donna",
            "Charlie",
            "Delores",
            "Abby",
            "Will"];

        // Set initial values for on-page elements

        this.myName = names[0];
        this.nameIndex = 0;

        /**
         * Changes the name when called.
         */
        this.changeName = function ($scope, names) {
            $scope.$parent.nameIndex++;
            if ($scope.$parent.nameIndex > (names.size - 1)) {
                $scope.$parent.nameIndex = names[0];
            } else {
                $scope.$parent.myName = names[$scope.$parent.nameIndex];
            }

        };

        $interval(this.changeName, 5000);
    });
})();