Ion-items inside ion-tabs disappears

I have implemented ion-tabs to show my recently viewed products and search results. I am storing the recent items in localstorage and I am binding it in my html. Initially this was working fine, but the list was disappearing frequently. The list was not binding in html. I have come across some solutions like - using $rootScope.apply(), $timeout(), etc.. I have tried everything. Now the number of disappearances has reduced. But still sometimes the list disappears.Unless I reinstall the app, the list is not getting displayed.

In my controller I am doing this :-

$scope.$on( "$ionicView.loaded", function( scopes, states ) {
    $scope.init();
});
$timeout(function() {
   $rootScope.$apply(function()
   {
       $rootScope.viewedList = JSON.parse(window.localStorage.getItem("viewedList") || "[]");
    });
}, 10);

The following code is in my html:-

  <ion-tabs class="tabs-striped tabs-top tabs-background-grey tabs-positive">        
    <ion-tab title="Viewed items">          
       <ion-content class="has-header has-subheader has-tabs-top padding"   style="padding:40px 0" overflow-scroll="true" has-bouncing="false">
          <div ng-repeat="item in viewedList | reverse " >
              <ion-list>
          <ion-item  class="item item-divider" ng-click="productSearch(item.productId)"> 
             <span style="font-weight:bold"> {{item.Description}}</span><br>
                               {{item.productId}}
          </ion-item>     
               </ion-list>
          </div>

          <div ng-if="viewedList.length===0 || viewedList==null">
                <ion-item>No Viewed Items
                </ion-item>
            </div>
        </ion-content>
    </ion-tab>

    <ion-tab title="Search Results">  
       <!-- Another tab here-->
    </ion-tab>
</ion-tabs>

Can someone please help me with this issue???