javascript - Refreshing $scope from inside a $scope.function() -

first of all, i'm sorry if post long. also, in case somehow interferes answers may give me, i'm not defining controller in usual way. instead, follow http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html, , do:

var game_1 = function($scope){   var _this = this;   //some code   $scope.somefunction = function() {     _this.somefunction() ;   } ; } ; game1.prototype.somefunction = function() {   //some code } ; game_1.$inject = ['$scope'] ; app.controller('game_1', game_1) ; 

in html, have object attribute ng-show="checkrare". now, have set of functions work kind of matryoshka doll:

defined inside controller:

this.promptelement = function(message) {     var input = prompt(message) ;     if ( input === null ) {         this.resetcell(this.cellij) ;         return false ;     } else if ( input === '' ) {         this.resetcell(this.cellij) ;         return '' ;     } else {         return input.touppercase() ;     } } ; //some more code $scope.function1 = function(i,j,f) {     _this.function1(i,j,f) ; } ; $scope.function2a = function(j) {     _this.function2a(j) ; } ; $scope.function2b = function(i,f) {     _this.function2b(i,f) ; } ; $scope.function3a = function() {     _this.function3a() ; } ; $scope.function3b = function() {     _this.function3b() ; } ; $scope.function4 = function() {     $scope.checkrare = true ; //the problem lies here     _this.function4() ; } ; 

and outside, have:

game_1.prototype.function1 = function(i,j,f) {     //some code      this.inputelement = this.promptelement('enter element name') ;     //some more code } ; game_1.prototype.function2a = function(j) {     //some code     ( var = 1 ; < 8 ; i++ ) {         this.function1(i,j) ;         if ( this.inputelement === false ) { return ; }     } } ; game_1.prototype.function2b = function(i,f) {     //some code     ( var j = j0 ; j < jf ; j++ ) {         this.function1(i,j,f) ;         if ( this.inputelement === false ) { return ; }     } } ; game_1.prototype.function3a = function() {     //some code     ( var j = 1 ; j < 19 ; j ++ ) {         this.function2a(j) ;         if ( this.inputelement === false ) { return ; }     } } ; game_1.prototype.function3b = function() {     //some code     ( var = 6 ; < 8 ; i++ ) {         this.function2b(i,true) ;         if ( this.inputelement === false ) { return ; }     } } ; game_1.prototype.function4 = function() {     //some code     this.function3a() ;     if ( this.inputelement === false ) { return ; }     this.function3b() ; } ; 

however, suggested in question asked, $scope not going refresh until whole function has finished, won't able see effects of $scope.checkrare = true until end. in order first thing happens, i've tried using $scope.$apply, error $apply in progress (which, way, randomly). i've tried using $timeout , 'safeapply' approach (https://coderwall.com/p/ngisma/safe-apply-in-angular-js), neither 1 worked.

so, ideas on how see result of $scope.checkrare = true before rest of function runs course? and, secondary question, tell me why $apply in progress when i'm not explictly using $scope.$apply?

thanks in advance! , again, sorry long post! :)

i might not understand question, think you're looking this:

... $scope.dosomething = function(){   $scope.checkrare = true;   $timeout(function(){     // check results of setting $scope.checkrare   }); } ... 

to understand why works, helps understand javascript event loop. in short, dom doesn't updated until end of event loop iteration. each iteration through loop doesn't end until javascript engine has run out of code execute. when put code timeout callback (with no delay), telling javascript engine run callback in next iteration of loop (thus allowing dom updated before callback run).