Refresh $scope while in $apply

Question

In my HTML, I have an element with a ng-click attribute to trigger a function. This function contains a loop which calls another function in each step. Now, I would like to refresh my $scope after every step of the loop, but:

• I can't use $scope.$apply since I'm already inside an $apply phase due to the ng-clickattribute,
• I can't use onclick instead of ng-click because the click function changes (with ng-repeat specifically), and
• $timeout doesn't work because it somehow messes the order in which the function inside the loop runs (I guess the click function runs the loop and then the bit inside $timeout takes place).

Here's my code:

// IN MY HTML
<th class="groupHeader" ng-repeat="j in groupsMain" ng-click="thClickColumn(j)">{{j}}</th>

// IN MY CONTROLLER
$scope.thClickColumn = function(j) {
    // some code
    for ( var i = 1 ; i <= 7 ; i++ ) {
        _this.tdClick(i,j) ; // I'd like my $scope to refresh after doing this
        if ( _this.inputElement === false ) { return ; } // Also, this bit here should break the loop if the condition is met (_this.inputElement is returned by the function above)
    }
} ;

Thanks!

Answer 1

actually you could use $timeout, just make sure the promise chain is correct:

$scope.thClickColumn = function(j){

     var iterator = 7;

     function call(){
         if(iterator > 0){
             _this.tdClick(iterator, j);
             $timeout(function(){
                 iterator--;
                 if(_this.inputElement !== false){
                     call()
                 }
             })
         }
     }

     call();
}