Q:

Angularjs scope not working

I am using basic angular.js concept to show and hide a div. For some reasons I am unable to make it work.
     While Uploading a file I am showing a div 'myFormSpinner' on the basis of   registerStart value. I am creating a phone gap app.
Could someone please help me in finding the issue. Apart from showing/hiding div everything works fine. Below is the code snippet:
 <div class="row" ng-controller="RegisterCtrl">  
 <div id="myFormSpinner"  ng-show="registerStart"> 
     <img src="img/ajax-loader.gif"> 
 </div> 
 <div class="col-md-8"> 
     <form class="ng-pristine ng-invalid ng-invalid-required" style="margin-top:5%;"> 
           <div class="col-md-6"> 
                  <input class="form-control " type="text" ng-model="registerData.Email" id="Email" name="Email" required placeholder="Email"> 
             </div> 
                <div class="col-md-offset-1 col-md-10 "> 
                   <input type="submit" ng-click="register()" value="Register" class="btn btn-default btn-primary"> 
                </div> 
     </form> 
 </div> 

 
event.controller('RegisterCtrl',    ['$scope', '$state', '$q', '$http', 'eventService', 'authService', '$stateParams', '$rootScope', 'tokenService', 'imageService', 'spinnerService', 'appBackgroundService', 
function ($scope, $state, $q, $http, eventService, authService, $stateParams, $rootScope, tokenService, imageService, spinnerService, appBackgroundService) { 
var userNumber = 0; 
$scope.mediaUploadStart = false; 
$scope.eventId = $state.params.id; 

 $scope.register = function () { 
     $scope.registerStart = true; 
     console.log('scope.Pic=' + $scope.pic); 
     if ($scope.registerData.Email) { 

         spinnerService.show('myFormSpinner'); 
         $scope.mediaUploadStart = true; 
         var paramOptions = { 
             eventId: $state.params.id, 
             email: $scope.registerData.Email, 
             fb: {}, 
             number: userNumber, 
             provider: "Form" 
         }; 
         uploadPicAndData(paramOptions).then(function (result) { 
             var data = JSON.parse(result); 
             $scope.registerStart = false; 
             appBackgroundService.disableBackgroundMode(); 
         }, 
             function (error) { 
                 spinnerService.hide('myFormSpinner'); 
                 $scope.registerStart = false; 
                 appBackgroundService.disableBackgroundMode(); 
             }); 
         $scope.mediaUploadStart = false; 
         spinnerService.hide('myFormSpinner'); 
     } 
          }; 
 }])

A:

You are setting the $scope element in an async mode.
the digest cycle is not able to determine that a change has been made to the scope element in an async mode.
You should use $apply to activate the digest cycle.
$scope.$apply(function () { $scope.registerStart = false; });

Read more about $apply here: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

