title: Angularjs individual process execution
body: <p>Would like to check I have a simple web service resource query function like this </p>
  
  <pre><code>//Get country lists
  $scope.getCountry = function(){
      $http({
          method  : 'GET',
          url     : cdnLinks('country'),
      }).success(function(data) {
          $scope.countries = data;
      }).error(function(data) {
          console.log(data);
      });
  };
  
  //Get profile 
  $scope.getProfile = function(profile_id, select){
       var formatJSON = {
              profile_id: profile_id,
              select: select,
          };
      var json = JSON.stringify(formatJSON);
      var urlsafe = exEncrypt(json);
      ProfileService.profileActions.query({payload:urlsafe}).$promise.then(function(datas){
          $scope.uProfile = datas[0];
          document.querySelector('title').innerHTML = $scope.uProfile.username;
      });  
  };
  
  //Initialize update sequence
  $scope.initUpdate = function(profile_id, select){
      $scope.getCountry();
      $scope.getProfile(profile_id, select);
  }
  </code></pre>
  
  <p>So what the code does is upon a user click on the "Update" button, it will fire <code>ng-click="initUpdate(param1, param2)"</code> function which will then load all and display the necessary information to a user. This function works perfectly but there is one problem. Because that the <code>getCountry()</code> usually returns a larger file size [~3 - 3.5kb, load time ~260++ms server dependent] compare to plain <code>getProfile()</code> [~1 - 2kb, load time ~200++ms server dependent], what the code does is the profile will be displayed before the country list is being loaded which in the UI page ended up with some empty field not filled in. </p>
  
  <p>So what i does initially is by applying a timeout to <code>getProfile()</code> like this </p>
  
  <pre><code>$scope.initUpdate = function(profile_id, select){
      $scope.getCountry();
      $timeout(function(){
          $scope.getProfile(profile_id, select);
      }, 200);
  }
  </code></pre>
  
  <p>which works fine for a moment but again i cannot specifically define the amount of time to be delayed since the loading part is server dependent.</p>
  
  <p>I would like to check if there is any approach that i can use / implement such that i want </p>
  
  <ol>
  <li>All the necessary resources to be loaded and <strong>COMPLETED</strong> (<code>getCountry()</code>, <code>getInterest()</code>, <code>getABCDEFG()</code> and some other gets...) </li>
  <li>only the <code>getProfile()</code> function is being called?</li>
  </ol>