title: How to load data in ngDialog
body: <p>I have a requirement where I need to open a dialog from a jsp page and while opening the dialog, I need to load it with some prepopulated data from the server (using an AJAX call). If I make the AJAX call before opening the dialog, I get the data but the dialog loads like a new page. If I try to get the data in the new controller, the dialog still does not reflect the data. What should I use to make sure the dialog reflects the data that I am getting from the server</p>
  
  <pre><code>&lt;div class="container-fluid" ng-controller="EditUserController"&gt;
  
      &lt;div class="text-center container-fluid"&gt;
          &lt;label class="sub-header"&gt;Edit User: {{userEmail}}&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;form action="editUser" method="post" name="editForm"&gt;
          &lt;div&gt;
              &lt;div class="pull-right"&gt;
                  &lt;label&gt;Delete User&lt;/label&gt;&lt;br&gt; &lt;a href="#"
                      class="btn btn-block btn-sm btn-danger" ng-click="deleteUser(userEmail)"&gt;{{userEmail}}&lt;/a&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label&gt;Change Role&lt;/label&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label&gt;
                  &lt;input type="checkbox" ng-model="superVisor" name="superVisorFlag" 
                  ng-true-value="1" ng-false-value="0" value="${existingUser.superVisorFlag}"&gt;
                  Make a Supervisor&lt;/label&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input type="text" class="form-control" ng-model="email"
                      name="emailAddress" ng-disabled = "true"
                      ng-options="email for email in userEmail"
                      value="${existingUser.emailAddress}"
                      placeholder="Enter New User Email Address" bs-typeahead&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input type="text" class="form-control" ng-model="firstName"
                      name="firstName" value="${existingUser.firstName}"
                      placeholder="Enter First Name" bs-typeahead&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input type="text" class="form-control" ng-model="lastName"
                      name="lastName" value="${existingUser.lastName}"
                      placeholder="Enter Last Name" bs-typeahead&gt;
              &lt;/div&gt;
  
  
              &lt;div&gt;
                  &lt;a href="#" class="btn btn-sm btn-primary" ng-click="saveChanges()"&gt;Save Changes&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript"
      src="&lt;c:url value="/resources/scripts/admin.js"/&gt;"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p>The above is a jsp for the dialog. Below is my js file -</p>
  
  <pre><code>var app = angular.module('scc-admin', [ 'ngDialog', 'mgcrea.ngStrap' ]);
  app.factory("UserList", function() {
      var UserList = {};
      UserList.data = [ {
          userId : 111,
          userFirstName : "xxx",
          userLastName : "yyy",
          userEmail : "xxx.yyy@zzz.com",
          userRole : "Admin"
      }, {
          userId : 222,
          userFirstName : "second",
          userLastName : "last",
          userEmail : "second.last@zzz.com",
          userRole : "Manager"
      }];
      return UserList;
  });
  app.controller('UserSettingsController', function($scope, ngDialog, UserList,$http) {
      // variable for the bashboard list
      $scope.userList = UserList;
      $scope.editUser = function(userEmail) {             
          $scope.userEmail = userEmail;       
          ngDialog.open({
              template : 'editUser' ,
              className : 'ngdialog-theme-default',
              controller : 'EditUserController',
              closeByEscape : true,
              scope : $scope
          });
      };
  
      $scope.addUser = function() {
          ngDialog.open({
              template : 'addUser',
              className : 'ngdialog-theme-default',
              controller : 'AddUserController',
              closeByEscape : true,
              scope : $scope
          });
      };
  
  });
  
  app.controller('EditUserController', function($scope, ngDialog, $http) {
  
      ngDialog.template = $scope.output;
      ngDialog.$modelValue = $scope.output;
  
      var responsePromise = $http.get("initUser?email=" + $scope.userEmail);
          responsePromise.success(function(data, status, headers, config) {
                  $scope.output = data;
                  console.log(data);                
          });
      console.log($scope);
  
      $scope.deleteUser = function(){
  
          $scope.cfdump = "";
  
          var str = {emailAddress : $scope.userForm.emailAddress.$modelValue};
          str = JSON.stringify(str);
  
          var request = $http({
              method: 'post',
              url: "deleteUser?formData=" + str,
              data: ({formData:str})
          });
  
          request.success(function(html){
              alert("success");
          });
  
          request.error(function(errmsg){
              alert("Unable to delete user");     
          });     
  
      }
  
  });
  </code></pre>
  
  <p>I am opening a dialog in usersettings controller and trying to load it with default data. I tried setting the new dialog's template to the output of the AJAX call, it did not work. What am I missing here?</p>