title: delay the execution of code till the completion of a function in Angularjs
body: <p>In my Angularjs application, I have code as shown below. Initially <code>$scope.changeChartTypeModelNames</code> array is empty but inside <code>$scope.doTimeConsumingTask</code>, I am populating <code>$scope.changeChartTypeModelNames</code> with some values. But the problem is happening due to the time consuming tasks inside <code>$scope.doTimeConsumingTask</code>. Even before <code>$scope.doTimeConsumingTask</code>  completes the next <code>for</code> <code>loop</code> is getting executed. So, I am always getting <code>$scope.changeChartTypeModelNames</code> length as Zero. Even though after the completion of <code>$scope.doTimeConsumingTask</code> the <code>$scope.changeChartTypeModelNames</code> array shows the correct values. Only  after completion of <code>$scope.doTimeConsumingTask</code>, I want the next for loop to be executed. How can I achieve it? Consider that <code>$scope.doTimeConsumingTask</code> may or may not have Ajax calls.</p>
  
  <pre><code>$scope.$watch('isTopCarrierListClosed', function (isTopCarrierListClosed) {
      if ($rootScope.isTopCarrierListClosed) {
          $scope.doTimeConsumingTask($scope.dataSet);
          for (var i = 0; i &lt; $scope.changeChartTypeModelNames.length; i++) {
              var dropDownName = $scope.changeChartTypeModelNames[i];
              alert(dropDownName);
              $scope.dropDownName = {};
          }
      }
  }
  
  
  
  $scope.doTimeConsumingTask = function(data){
       ...
  
       ...
  }
  </code></pre>