JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
JavaScript
// Make module Foo
angular.module('Foo', []);
// Bootstrap Foo
var injector = angular.bootstrap($('body'), ['Foo']);
// User adds Ctrl_1
// Make controller Ctrl in module Foo
angular.module('Foo').controller('Ctrl_1', function() { });
// Load an element that uses controller Ctrl_1
var ctrl1 = $('<div ng-controller="Ctrl_1">').appendTo('body');
// compile the new element
injector.invoke(function($compile, $rootScope) {
// the linker here throws the exception
try {
$compile(ctrl1)($rootScope);
} catch(err) { console.error(err.toString()); }
});
// Some time later, user adds Ctrl_2
// Make controller Ctrl in module Foo
angular.module('Foo').controller('Ctrl_2', function() { });
// Load an element that uses controller Ctrl_2
var ctrl2 = $('<div ng-controller="Ctrl_2">').appendTo('body');
// compile the new element
injector.invoke(function($compile, $rootScope) {
// the linker here throws the exception
try {
$compile(ctrl2)($rootScope);
} catch(err) { console.error(err.toString()); }
});