JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!DOCTYPE html>
<html ng-app="myApp">

<body ng-controller="myController">

    <div>
        <h3>Links</h3>
        <a ng-repeat="url in urls" ng-href="{{url}}">{{url}}</a><br ng-repeat-end/>
    </div>

    <div>
        <h3>Scripts</h3>
        <div ng-repeat="url in scriptUrls">
            <script type="text/javascript" ng-src="{{url}}"></script>
        </div>
    </div>


</body>
</html>

JavaScript

var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.urls = [
                'https://www.google.com',
                'https://www.example.com',
                'https://www.angularjs.org'
            ];
            $scope.scriptUrls = [
                'https://example.com/script1.js',
                'https://example.com/script2.js',
                'https://example.com/script3.js',
                'https://example.com/script4.js'
            ];
        });

        app.run(function($rootScope, $timeout) {
            $rootScope.$watch(
                function() { return document.body.innerHTML; },
                function(newVal, oldVal) {
                    if (newVal !== oldVal) {
                        $timeout(function() {
                            var scriptElements = document.querySelectorAll('div h3 ~ div > script');
                            scriptElements.forEach(function(script) {
                                alert(script.outerHTML);
                            });
                        }, 0);
                    }
                }
            );
        });