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>
<div ng-controller="someScopeVar">
Hello {{name}}
</div>
</div>
JavaScript
var template = '<div ng-controller="someScopeVar">' +
'Hello {{name}}' +
'</div>';
mainCtrl = function($scope, $compile, $element) {
$scope.someScopeVar = ctrl1;
$scope.changeCtrl = function(id) {
$scope.someScopeVar = id === 1 ? ctrl1 : ctrl2;
var elm = $element.find('div');
elm.replaceWith($compile(template)($scope));
}
}
var ctrl1 = function($scope) {
$scope.name = 'World';
}
var ctrl2 = function($scope) {
$scope.name = 'John';
}