How to ajax load a URL in AngularJS Bootstrap modal [on hold]

There's no need to manually load the template into the dialog. The $dialog service from AngularUI accepts both a static template or a template url. That URL can return anything, it'll just perform a GET request via an AJAX call and fill the dialog with whatever data is returned. That request is cached locally so that next calls are supposed to be faster than the first one.

Here's a simple snippet to get you started:

Javascript

angular.module('app', ['ui.bootstrap.dialog'])
    .controller('Ctrl', function($scope, $dialog, $window) {
        $scope.open = function() {
            var options = {
                backdrop: true,
                keyboard: true,                    
                controller: 'DialogCtrl', // the dialog object will be inject 
                                          // into it
                templateUrl: 'path/to/view' // can be either a static file or 
                                            // a service that returns some data
            };
            var dialog = $dialog.dialog(options);
            dialog.open().then(function(result) {
                if (result === 0) {
                    $window.alert("Cancel pressed");
                }
                else if (result === 1) {
                    $window.alert("OK pressed");
                }
            });
        };
    })
    .controller('DialogCtrl', function($scope, dialog) {
        // Here you can put whatever behavior the dialog might have
        $scope.close = function(result) {
            dialog.close(result);
        };
    });

Main HTML

<div ng-app="app" ng-controller="Ctrl">
  <button ng-click="open()">Open dialog</button>
</div>

View HTML

<div class="modal-header">
  <h3>Title</h3>
</div>
<div class="modal-body">
  <p>Content</p>
</div>
<div class="modal-footer">
  <button class="btn" ng-click="close(0)">Cancel</button>
  <button class="btn btn-primary" ng-click="close(1)">OK</button>
</div>

This Plunker script demonstrates all of the above.

"modal is a directive that reuses $dialog service to provide simple creation of modals that are already in your DOM without the hassle of creating partial views and controllers.

The directive shares $dialog global options."

Check the bootstrap dialog options below is the url :

http://angular-ui.github.io/bootstrap/#/dialog