JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app ng-controller="mainCtrl">
    <button ng-click='changeCtrl(1)'>Controller 1</button>
    <button ng-click='changeCtrl(2)'>Controller 2</button>
        Hello {{name}} 
  </div>

JavaScript

var template = '<div ng-controller="someScopeVar">' + 
                        'Hello {{name}}' + 
                    '</div>';


mainCtrl = function($scope, $compile, $element) {
    angular.extend($scope, ctrl1());
    $scope.changeCtrl = function(id) {
         angular.extend($scope, id === 1 ? ctrl1() : ctrl2());
    }
}

var ctrl1 = function() { 
  var obj = {};
  obj.name = 'World';
  return obj;
}

var ctrl2 = function() {      
  var obj = {};
  obj.name = 'John';
  return obj;
}