AngularJS $includeContentLoaded demo

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<div ng-controller="AppController">
		<script type="text/ng-template" id="modal.html">
			<p>Included modal text</p>
		</script>
		<div id="termsAndConditionsPopover" ng-include src="templates.modal" ng-controller="ModalCtrl"></div>
	</div>

CSS

body { 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 14px; 
    margin: 0; 
}
#output { 
    border: 1px solid red; 
    margin: 10px; 
    padding: 10px;
}

JavaScript

var demo = angular.module('demo', []);

demo.controller('AppController', ['$rootScope', function ($rootScope) {
	$rootScope.templates = {
		modal: 'modal.html'
	};
}]);

demo.controller('ModalCtrl', ['$scope', function ($scope) {
	//$scope.name = 'ModalCtrl';
	$scope.$on('$includeContentLoaded', function(event) {
		$('#termsAndConditionsPopover').dialog({ autoOpen: true });
	});
}]);