title: How to wait until data is loaded in AngularJS?
body: <p>In my app I have some data that I fetch from a service that I then proceed to use in my code to preload a form. However, sometimes the data isn't loaded until after the rest of the code is run, so the form comes up blank. Other times, it's fine and everything loads. I want to make it such that it always loads the form with all fields populated. </p>
  
  <p>The problem is that I have multiple service calls, so how do I make sure that all services have finished loading? Here is my code: </p>
  
  <p>In Reference Data Service (the rest of the GETs pretty much use the same kind of code):</p>
  
  <pre><code>        factory.getAllOffices= function(){
            var deferred = $q.defer();
            $http.get(APP_CONFIG.refURL+"/reference/getAllOffices")
              .success(function(response){
                  deferred.resolve(response);
              })
              .error(function(msg, code, headers, config){
                  console.log(msg);
                  deferred.reject(msg);
              });
          return deferred.promise;
      };
  </code></pre>
  
  <p>In the controller:</p>
  
  <pre><code>    referenceDataService.getAllOffices().then(function(data){
          $scope.allOffices= data;
      });
  
      referenceDataService.getAllTypes().then(function(data){
          $scope.allTypes= data;
      });
  
      referenceDataService.getAllTeams().then(function(data){
          $scope.teamOptions.data = data;
      });
  
      //Checking to see if form exists.
      $scope.formID= '';
  
      if(!angular.isUndefinedOrNull($routeParams.id)){
          $scope.formID= $routeParams.id.substring(1);
      }
  
      if (!($scope.formID== '')){
          addFormService.getForm($scope.formID).then(function(data) {
  
              var officeIndex=angular.findIndexOf($scope.allOffices, data.officeID);
              var typeIndex=angular.findIndexOf($scope.allTypes, data.typeID);
  
              $scope.form.name= data.name;
              $scope.report.office= $scope.allOffices[officeIndex];
              $scope.report.type= $scope.allTypes[typeIndex];
              $scope.teamOptions.data = data.teamList;
              $scope.report.teams= data.teams;
  
              angular.forEach($scope.report.teams, function(id) {
                  $scope.teamOptions.grid.rows.map(function (row) {
                      if (row.entity.id == id) {
                          row.setSelected(true);
                      }
                  });
              });
          });
      }
  </code></pre>
  
  <p>Sometimes Offices, Types, and Teams aren't returned before the formID code runs.  </p>