title: How can I wait in Angular JS till when my web service returns
body: <p>I have two calls to my web service and they will both populate two different sections of grid in the same page .</p>
  
  <p>And I do not want to show the page until both the web service calls return .</p>
  
  <p>Here is what it looks like :</p>
  
  <p>in ABCCtrl.js ............</p>
  
  <pre><code>if (params) {
      //I set the please wait dialog on
      $scope.pleaseWait = { "display": "block" };
  
  
      //I hit the first service call and it will populate myFirstUIGrid
      TransactionApiServices.getApiUnmergeProcessDetails(params).then(function (results) {
          $scope.gridOptions_PR.data = "";
          $scope.gridOptions_PR.data.length = 0;
          $scope.gridOptions_PR.data = results.data;
          console.log(results);
      });
  
      //I hit the second service call and it will populate mySecondUIGrid
      TransactionApiServices.getApiUnmergeRequestDetails(params).then(function (results) {
          $scope.gridOptions_RQ.data = "";
          $scope.gridOptions_RQ.data.length = 0;
          $scope.gridOptions_RQ.data = results.data;
          console.log(results);
      });
  </code></pre>
  
  <p>After both the grid populate only I want to <code>set the please wait off</code> and display the grids.</p>
  
  <pre><code>    $scope.toggleDetails = { "display": "block" };
      $scope.toggleHeader = { "display": "block" };
      $scope.pleaseWait = { "display": "none" };
  </code></pre>
  
  <p>Here is the page that holds two ui grids :</p>
  
  <pre><code>&lt;div class="home-grid-content" ng-controller="TransactionDetailsUnmergeController"&gt;
      &lt;div ng-style="pleaseWait"&gt;
          &lt;div class="refresh" style="width:100%;height:100px;"&gt;
              &lt;h4&gt;Please wait....&lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div ng-style="toggleDetails"&gt;
          &lt;h3&gt;Unmerge Request Log&lt;/h3&gt;
          &lt;div ui-grid="gridOptions_RQ" ui-grid-selection class="" ui-grid-pagination ui-grid-auto-resize&gt;
              &lt;div class="watermark" ng-show="!gridOptions.data.length"&gt;No data available&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="grid-pager"&gt;
              &lt;uib-pagination boundary-links="true" total-items="totalItems" items-per-page="4" ng-change="pageChanged(currentPage)" ng-show="(totalItems&gt;4) == true"
                              ng-model="currentPage" class="pagination" direction-links="false" id="HconstUnmerge_1"
                              first-text="&amp;laquo;" last-text="&amp;raquo;"&gt;
              &lt;/uib-pagination&gt;
          &lt;/div&gt;
          &lt;br/&gt;
          &lt;h3&gt;Unmerge Process Log&lt;/h3&gt;
          &lt;div ui-grid="gridOptions_PR" ui-grid-selection class="" ui-grid-pagination ui-grid-auto-resize&gt;
              &lt;div class="watermark" ng-show="!gridOptions.data.length"&gt;No data available&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="grid-pager"&gt;
              &lt;uib-pagination boundary-links="true" total-items="totalItems" items-per-page="4" ng-change="pageChanged(currentPage)" ng-show="(totalItems&gt;4) == true"
                              ng-model="currentPage" class="pagination" direction-links="false" id="HconstUnmerge_1"
                              first-text="&amp;laquo;" last-text="&amp;raquo;"&gt;
              &lt;/uib-pagination&gt;
          &lt;/div&gt;
  
          &lt;div style="margin-top:8px;"&gt;
              &lt;button type="button" class="btn btn-default pull-left" ng-click="backToDetailsPage()"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>