How to ensure that a scope variable updates and binds before going to view angularjs

Question

In my code, there is this scope variable called $scope.detailsPresent which basically just checks if there is data and displays a different page based on the result.

What happens is that when i do console.log($scope.detailsPresent) the value is correct based on if there is data which the value should be false or if there is no data the value should be true.

But the view doesnt bind the value yet so on the view the value is not yet updated hence it doesnt show the correct page. How do i ensure that the value is updated in the view ? I have tries $scope.$apply() but i get an error so is there anyway to do it?

my_controller.js

angular.module('my.controllers')
.controller('ReferralCtrl', function($scope, $rootScope, $window, $state, $q, $timeout, referralCasesGroupByCaseStatus, AuthenticationService, $ionicLoading) {

$scope.detailsPresent = {myVar: false};

$scope.showCaseStatusFromDashboard = function(number) { 
    $timeout(function() {
      $scope.$applyAsync(function() {
        $rootScope.fromDashboard = true; 
      })
    }, 1000, true);
      $scope.showCaseStatus(number); 
  }

 $scope.showCaseStatus = function(number) {

    if(changedNumber !== 0 && changedNumber !== number) {
      changedNumber = number;
    }
    else {
      if(changedNumber > 0) {
        $scope.$applyAsync($scope.detailsPresent.myVar = true);
      }
    }

    $timeout(function() {
      $scope.$applyAsync(function() {  
        referralCasesGroupByCaseStatus.showCaseStatus(number, $rootScope.listingDetails).then(function(listingCaseStatus) {
          $rootScope.listingByCaseStatus = angular.copy(listingCaseStatus);

          if(listingCaseStatus == 0 || listingCaseStatus == undefined || listingCaseStatus == null) {

            $scope.detailsPresent.myVar = true;  
            $scope.changeNumber = true; 
            $state.go('app.case_status') 
          }  
          else {
            $scope.detailsPresent.myVar = false;
            $scope.noMoreItemsAvailable = false; 
            $scope.changeNumber = true; 
            $state.go('app.case_status') 
          } 
        })
      })
    }, 1000);
  }

my.html

<ion-view view-title="Case Status">
<ion-content>
    <div ng-if="detailsPresent.myVar">
      <ng-include src="template='no-listings'"></ng-include>
    </div>
    <div ng-if="!detailsPresent.myVar">
      <ng-include src="'templates/case-listings.html'"></ng-include>
    </div>
  </ion-content>
</ion-view>

I have been on this for about 6days but no success in sight. Any help is deeply appreciated.

Answer 1

This isn't a full answer, but I have some suggestions. This would work better as a comment, but I don't have enough reputation yet.

Try switching your ng-if attributes to ng-show attributes. I realize this leaves the included elements in the DOM, but it might work for you if the performance is not seriously affected.

Also, the reason you get an error when calling $scope.$apply() is because you're already within a call to $apply() , or rather $applyAsync() .

See this answer for more details on $apply()