JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="App">
    <div ng-controller="ClientController">
        <div ng-repeat='marker in markers'>
            <p>{{marker}}</p>
        </div>
        <button ng-click='add()'>add NG</button>
        <button onclick="foo.add()">add js</button>
    </div>
</div>

JavaScript

(function (w) {

    var Foo = function () {
        this.add = function () {
            Foo.arr.push('js-' + (Math.random() * 100));
            this.apply();
        };
        
        this.apply = function() {
            var appRoot = document.querySelector('[ng-app]');
            angular.element(appRoot).scope().$apply();
        };
    }
    
    Foo.arr = ['a', 'b', 'c'];
    w.Foo = Foo;
})(window);

var foo = new Foo;

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

App.value('arr', Foo.arr);
App.controller('ClientController', ['$scope', 'arr', function ($scope, arr) {
    $scope.markers = arr;
    $scope.add = function () {
        arr.push('ng-' + (Math.random() * 100));
    };
}]);