Angular and jQuery ng-include with document.ready not working
The modal dialog definitely needs to be initiated on some later event than document.ready. It's just a question of deciding which is the best event.
window.load is the most obvious event to try but is not a particularly "Angular" approach.
The earliest reliable event would be the completion of loading of the dialog div, and Angular provides for this with a $includeContentLoaded event.
To demonstrate the principle, here's a demo with content loaded from a local template and with jQueryUI's .dialog() :
HTML
<body ng-app="demo"> <div ng-controller="AppController"> <script type="text/ng-template" id="modal.html"> <p>This is included text</p> </script> <div id="termsAndConditionsPopover" ng-include src="templates.modal" ng-controller="ModalCtrl"></div> </div></body>Note that the ng-include and ng-controller directives work in consortium to achieve the objective of triggering an action when the content (determined by the the src attribute) has loaded
Javascript
var demo = angular.module('demo', []);demo.controller('AppController', ['$rootScope', function ($rootScope) { $rootScope.templates = { modal: 'modal.html' };}]);demo.controller('ModalCtrl', ['$scope', function ($scope) { $scope.$on('$includeContentLoaded', function(event) { $('#termsAndConditionsPopover').dialog({ autoOpen: true }); });}]); There's still some work to do though not a lot. Your final code should be largely a simplification of the above as you don't need the local template or the associated $rootScope.templates map.