How to load JSON data from an AJAX call in AngularJS Bootstrap modal

Question

I would like to create the following. Have a button that when clicked opens a dialog/modal from Angular Bootstrap[1 which will then display a loading indicator while the app fetches json data from the server then have that data be presented in the dialog content.

I am thinking that I would make a dialog template which has the parsing code for the json data i.e. some ng-repeat to present it as a list for example.

I am unclear as to:

1. Where in the process do I add a load indicator (let's say spin.js). I'd want to be able to refer to some div inside the dialog template from the controller I assume?
2. At what point do I make my ajax call
3. How to pass that data to the template and have it parsed

Answer 1

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, $http, dialog) {
        // Here you can put whatever behavior the dialog might have
        $scope.close = function(result) {
            dialog.close(result);
        };

        // Loads some data into the dialog scope
        $http.get('/path/to/service')
            .success(function(response) {
                $scope.items = response;
            });
    });

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">
  <!-- Renders the data loaded by the controller -->
  <p ng-repeat="item in items">{{ item }}</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.

Update: I've updated the example code in order to demonstrate how you can dynamically change the dialog box content.