JSFiddle - React, Tailwind, and code Playground

by acbabis

HTML

<div ng-app="fish">
  <ng-template  ng-controller="trollA">
    <button ng-click="turnItOn()">{{value}}</button>
  </ng-template>
  <ng-template ng-controller="trollB" ng-if="switch">
    {{value}}
  </ng-template>
</div>

JavaScript

angular.module('fish', []).controller('trollA', ["$rootScope", "$scope",
		function($rootScope, $scope) {
  $scope.value = 5;
  
  $scope.turnItOn = function() {
    $rootScope.switch = true;
    newController(); // Will silenty fail. Controller cannot be added after app loads
  }
}]);

function newController() {
  angular.module('fish').controller('trollB', ["$scope", function($scope) {
    $scope.value = 10;
  }]);
}

// Comment out this line to demonstrate that the controller cannot be added later
newController();