Generally, you cannot bootstrap Angular app's inside each other. However, Angular does not compile the Shadow DOM. Here's an experiment which attempts to bootstrap one app in another, using this barrier.

You couldeasily retrieve scripts and templates lazily / use HTML imports, and bootstrap once they're ready. Loading 'Other App' gives an example of this.

There are lots of things happening, so...

You should View Source (and console)

See article at: mbates.com


Variable from Parent App: {{parentAppText}}


First shadow app:

And Another of the same app: