Как обновить представление при загрузке данных в модель в угловом?

Question

У меня есть несколько <selects>, которые обновляются каждый раз, когда свойство объекта на модуле меняет значение. Проблема возникает, когда я пытаюсь запомнить состояние. Я сохраняю каждое изменение до localStorage, но когда я повторно заношу сохраненный объект при перезагрузке окна, модель изменяется правильно, но в представлении не отображается изменение, если я не нахожусь на <select>, а затем это когда все остальные, которые должны быть выбранные получают свои реальные значения из модели.

Я вижу, что это происходит, когда нагрузка задерживается с помощью тайм-аута или прослушивателя событий.

Как я могу это исправить?

var my_app = angular.module('campaign_listing', []) 
 
    .controller('campaign_list_controller', campaign_list_controller); 
 

 
function campaign_list_controller($http) { 
 
    var este = this; 
 
    this.filters = { 
 
    categories: ["a"], 
 
    }; 
 

 
    function get_save_state() { 
 
    var items = JSON.parse(localStorage.getItem("filters")); 
 
    return items; 
 
    } 
 
    this.recover_state = function() { 
 

 
    var save = get_save_state(); 
 
    console.log("recovering state:") 
 
    if (save) this.filters = save; 
 

 
    } 
 
    setTimeout(function() { 
 
    este.recover_state(); 
 
    }, 300); 
 
}

<select 
 
     id="multiselect_categories" 
 
     name="categories" 
 
     ng-model="ctrl.filters.categories" 
 
     ng-change="ctrl.update_fields()" 
 
     multiple="multiple"> 
 
    <option value="a">A</option> 
 
    <option value="b">B</option> 
 
    <option value="c">C</option> 
 
</select>

Answer 1

использование угловой в $ таймаут вместо SetTimeout, это заставит новый переваривать цикл, который будет обновлять пользовательский интерфейс

$timeout(function() { 
    este.recover_state(); 
    }, 300);