Angularjs ng-show is not working inside the modal

Question

Im opening modal popup on click of one button. The modal popup is opening and i want to show one progress bar inside the modal popup. After getting the response i want to hide it.

The progress bar is not showing for the fisrt time if im closing and opening the popup again then it's showing.

Below is my controller code :

$scope.clickUpload = function(){
   $('#import_poi_modal').modal('show');

   setTimeout(function(){ 
      $scope.fileChangeProgress = true;
      console.log($scope.fileChangeProgress)
   },1000);
}

HTML:

<div class="modal fade" id="import_poi_modal">
   <div class="modal-dialog">
      <div class="modal-content">

         <div class="modal-body">

            <div class="center-content" ng-show="fileChangeProgress"> //here im using the variable to show and hide
                <div class="col-6">
                    <div class="progress m-t-30 m-b-30" >
                        <div class="progress-bar progress-bar-orange active progress-bar-striped" style="width: 100%; height:14px;" role="progressbar"> </div>
                    </div>
                </div>
            </div>


        </div>
      </div>
   </div>
</div>

I have tried with setTimeout. Still it's not working.

You need to wrap with $apply in order for angular to be aware of the changes https://stackoverflow.com/questions/21472327/apply-in-settimeout — kendavidson, May 08 '19 at 14:28
This may also be helpful: https://stackoverflow.com/questions/32345006/ng-model-not-updating-inside-modal — JM-AGMS, May 08 '19 at 21:40

score 4 · Accepted Answer · answered May 09 '19 at 02:30

Since setTimeout is a javascript function(not an Angular one), you will need to use $apply to notify Angular for the changes.

setTimeout(function(){
  $scope.$apply(
    function() {
      $scope.fileChangeProgress = true;
      console.log($scope.fileChangeProgress);
    }
  );
},1000);

Another solution is to use the Angular native $timeout support:

$timeout(function(){ 
  $scope.fileChangeProgress = true;
  console.log($scope.fileChangeProgress)
},1000);

Should serve you the same purpose without $apply.

You can also refer to this $apply in setTimeout

Angularjs ng-show is not working inside the modal

1 Answers1