javascript - How to use a controller outside of ngApp's scope -

due structure of existing project i'm working on, i'm stuck template looks this:

<div ng-app="example">   <div ng-controller="mainctrl" id="inner">     {{ inside }}   </div> </div> <div ng-controller="mainctrl" id="outer">   {{ outside }} </div> 

#outer supposed using same controller #inner, it's located outside of ngapp's scope, {{ outside }} not evaluated. unfortunately can't change template structure, tried compile #outer's content this:

app.run(function($rootscope, $compile){   $rootscope.$apply($compile(document.getelementbyid('outer'))($rootscope)); }); 

this works, controller function executed twice, not desired. there better way achieve goal?

working example on plunker

what instead, not define ng-app @ in html, , instead bootstrap angular via javascript. example can angular.bootstrap(document, ['example']); 'example' angular module app example angular.module('example', [ 'ngresource', 'ui.router', .... ]); defined already. way, define ng-app on entire document scope.