ng-repeat не отображает данные из localStorage

Question

В моем контроллере:

При нажатии на элемент информация передается в tabNameStore.Данные отображаются в формате html по имени

     $scope.openTab = function($event){

     //Checks for doubles
     if($scope.tabNameStore.length>0){
         for(var i=0; i<$scope.tabNameStore.length; i++){                
             if($scope.tabNameStore[i].id == $event.currentTarget.id){
                 console.log("Already open");
                return;
             }
         }
     }

     //Saves name, ID and number
     $scope.tabNameStore[count] = ({name: $event.currentTarget.innerHTML, 
 id: $event.currentTarget.id, num: count++});

     //Tries to get item by id
     var local = localStorage.getItem($event.currentTarget.id);

     //If not stored in local, it does so
     if (local == null){
      localStorage.setItem($event.currentTarget.innerHTML, 
$scope.tabNameStore[count-1].name);
      localStorage.setItem($event.currentTarget.id, 
$scope.tabNameStore[count-1].id);
      console.log("null");
    } else{
        console.log("not null");
        return;
    }

 }

Сохранение данных из localStorage обратно в tabNameStore

     $window.onload = function() {       
     var archive = [];
     archive = allStorage();
     count = 0;

         for(var i=0; i<archive.length/2; i++){ 
             if(archive[i] != null){
                 $scope.tabNameStore[count] = ({name: archive[i], id: 
         archive[i+archive.length/2], num: count++});
             }
         } 
 }

Получение всех данных из localStorage

     function allStorage() {
     var keys = Object.keys(localStorage);          // Gibt alle Schlüssel zurück
     var archive = [];

    for (var i=0; i< keys.length; i++) {
        archive.push(keys[i]);
    }
     return archive;
 }

HTMLis:

   <article id="default">

    <div id="heading">
            <a href="###" class="tab" id="desktop" >Desktop</a>
            <a href="###" class="tab" id="" data-ng-repeat="y in 
    tabNameStore" data-ng-click="" >{{y.name}}</a>  
    </div>

    <div class="gridly toggle" id="Desktop">
        <div class="brick small" draggable="true" data-letters=" 
          {{x.name[0]}}" id="{{x.id}}" data-ng-repeat="x in storage | 
          orderBy: '-name'" data-ng-click="openTab($event)">
            {{x.name}}
        </div>
    </div>
    </article>

После перезагрузки страницы и получения данных из localStorage она все равно не отображается, даже если массив заполнен.Просто если я снова нажму на один из моих элементов (функция openTab), все элементы, хранящиеся в localStorage, будут отображены сразу.

Answer 1

Я решил:

Добавив $scope.$apply вокруг части, которая перезагружает массив:

     ....
     $scope.$apply(function(){
         for(var i=0; i<archive.length/2; i++){ 
             if(archive[i] != null){
                 $scope.tabNameStore[count] = ({name: archive[i], id: 
                 archive[i+archive.length/2], num: count++});
             }
         }
     });
     ....

Таким образом, обновленный массив настраивается для angularjs после перезагрузки.