JSFiddle - React, Tailwind, and code Playground

by Luis Perez

HTML

<div id="myDiv1">
    <h1>myDiv1</h1>
    <div ng-controller="MyControllerA">
        {{name}}
    </div>
    <div ng-controller="MyControllerB">
        {{name}}
    </div>
</div>

<div id="myDiv2">
    <h1>myDiv2</h1>
    <div ng-controller="MyControllerB">
        {{name}}
    </div>
</div>

JavaScript

var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
    $scope.name = "Bob A";
});

var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
    $scope.name = "Steve B";
});

angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById("myDiv1"), ["MyModuleA", "MyModuleB"]);
    angular.bootstrap(document.getElementById("myDiv2"), ["MyModuleB"]);
});