<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div><a href="index-nested.html">
Switch to <strong>nested</strong>
<code>ngApp</code> and <code>ngInclude</code>
</a>
</div>
<h2><code>ngApp</code> and <code>ngInclude</code> on same element</h2>
<p>
<h2>Html Structure</h2>
<pre><code><div ng-app="myApp" ng-include="'template.html'"></div></code></pre>
</p>
<hr/>
<div ng-app="myApp" ng-include="'template.html'">
</div>
</body>
</html>
angular.module('myApp', []);
angular.module('myApp').controller('BaseController', function () {
function appElement() {
return angular.element(document.querySelector("[ng-app]"));
}
this.injectorIsUndefined = function () {
return appElement().injector() === undefined;
}
});
<div ng-controller="BaseController as base">
<pre>injectorIsUndefined: {{ base.injectorIsUndefined() }}</pre>
</div>
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<a href="index.html">
Switch to <code>ngApp</code> and <code>ngInclude</code>
<strong>on same element</strong>
</a>
<h2>nested <code>ngApp</code> and <code>ngInclude</code></h2>
<p>
<h2>Html Structure</h2>
<pre><code><div ng-app="myApp"><div ng-include="'template.html'"></div></div></code></pre>
</p>
<hr/>
<div ng-app="myApp">
<div ng-include="'template.html'"></div>
</div>
</body>
</html>