Compile dynamic template from outside of angular

I want to load dynamic HTML content via AJAX, then compile it, because it contains angular directives.

<!DOCTYPE html>
<html ng-app="app">
<head>
	<title>Compile dynamic HTML</title>
	<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
	<script type="text/javascript" src="js/angular.js"></script>
</head>
<body ng-controller="TestCtrl">

<div obj></div>

<button class="foo">Change</button>

<script type="text/javascript">
	var app=angular.module('app',[]);
	app.controller('TestCtrl',function($scope){});

	jQuery(document).ready(function($){
		$('.foo').on('click',function(e){
		  // todo: load HTML content via AJAX or generate via jQuery
		  // todo: compile new HTML content, which contains Angular directives
		});
	});
</script>
</body>
</html>

We can get reference to $compile outside of angular via injector().invoke().

	jQuery(document).ready(function($){
		$('.foo').on('click',function(e){
			e.preventDefault();
			angular.element(document).injector().invoke(function($compile){
				var obj=$('[obj]'); // get wrapper
				var scope=obj.scope(); // get scope
				// generate dynamic content
				obj.html($('<input type="text" ng-pattern="/^([0-9]+)$/" ng-model="test"><span>{{test}}</span>'));
				// compile!!!
				$compile(obj.contents())(scope);
			});
		});
	});

umidjons/angular-compile-dynamic-html.md

Compile dynamic template from outside of angular

umrtariq commented Jan 31, 2018