Whitescreen appears on screen rotation in ionic1

Question

I having a screen for which I have given orientation when I change the orientation the screen takes some time to change the orientation in the mean time I am getting white screen can anyone tell me why it happens even I have tried using

window.addEventListener("orientationchange", function() {
    $ionicScrollDelegate.resize(); 
  }, false);

on run but still i am having the same issue.

Code for orientation change:

function toggleOrientation () {
  $log.log('orientation: ', vm.orientation);
  if (vm.orientation === 'portrait') {
    vm.orientation = 'landscape';
    screen.orientation.lock('landscape');
    $log.log('TrackeventLandscape', Track.Orientation_landscape);
    Analytics.trackEvent(Track.Orientation_landscape);
  } else {
    vm.orientation = 'portrait';
    screen.orientation.lock('portrait');
    $log.log('Trackeventportrait', Track.Orientation_portrait);
    Analytics.trackEvent(Track.Orientation_portrait);
  }
}

Html:

<ion-content>
  <div class="list nodata padding-15" ng-if="vm.daybooks.length === 0">
     <h4>
        <p>{{"nodatatoshow_message" | translate}}</p>
     </h4>
  </div>
  <ul class="trans-item m-t-20 m-r-10 m-l-10">
     <li ng-repeat="date in vm.uniqueDaybooks" class="FramerList list">            
        <a class="item item-icon-right dblist"> {{date}}
        <i class="icon ion-android-download" ng-click="vm.download(date)"></i>
        </a>            
        <div class="tableContainer">
          <table class="ledgerTable" cellspacing="10">
             <thead>
                <tr class="ledgerTblHeader">
                   <th>{{"user_message" | translate}}</th>
                   <th>{{"name_message" | translate}}</th>
                   <th>{{"desc_message" | translate}}</th>
                   <th>{{"income_message" | translate}}</th>
                   <th>{{"expenses_message" | translate}}</th>
                </tr>
             </thead>                 
             <tbody>
                <tr ng-repeat="daybook in vm.daybooks | filter: {date: date}" ng-click="vm.gotoDaybookDetail(daybook)">
                   <td>{{daybook.user_type === 'User' ? 'Expense' : daybook.user_type}}</td>
                   <!-- <td>{{daybook.location | limit }}</td> -->
                   <td>{{daybook.transaction_type === 'Expense' ? daybook.category : daybook.location | limit }}</td>
                   <td ng-if="daybook.transaction_type === 'FarmerTrade'">Bill-No: {{daybook.bill_no}}</td>
                   <td ng-if="daybook.transaction_type === 'Expense'">{{daybook.description | isNullExpense}}</td>
                   <td ng-if="daybook.transaction_type !== 'BuyerPayment' && daybook.transaction_type !== 'FarmerTrade' && daybook.transaction_type !== 'Expense'">{{daybook.category ? daybook.category : daybook.description | isNullAdvance}}</td>
                   <td ng-if="daybook.transaction_type === 'BuyerPayment'">{{daybook.category ? daybook.category : daybook.description | isNullPayment}}</td>
                   <td align="right">{{daybook.amount_in}}</td>
                   <td align="right">{{daybook.amount_out}}</td>
                </tr>
             </tbody>
          </table>
        </div>
     </div>
     </li>
  </ul>