AngularJS视图在屏幕交互后正确呈现

Question

我有一个带有两个控制器的Angular App，每次服务器发送新信息时都会更新两个模型。为了澄清，必须在同一视图中更新相同的信息，但必须在两个不同的范围内更新。在Header中，使用“NavigationController”和myQueue.html页面，使用QueueController在应用程序的每个页面中显示。

myQueue.html

<div class="off-canvas-wrap">
    <div class="inner-wrap">
        <div class="navigation" ng-controller="NavigationController">
            <nav class="tab-bar">
                <section class="left-small">
                    <a class="left-off-canvas-toggle bh-logo-top"><span></span></a>
                </section>
                <section class="middle tab-bar-section">
                    <ul id="top-menu" class="clearfix">
                        <li id="msg-icon" ng-click="verMensagens();"><span></span></li>
                        <li id="fav-icon" ng-click="verFavoritos();"><span></span></li>
                        <li id="fila-icon" ng-click="visualizarFila(estaEmFila);"><span>{{queuePosition}}</span></li>
                    </ul>
                </section>
                <section class="right-small">
                    <a href="#/success/{{user.user_id}}" id="bh-search-icon"><span></span></a>
                </section>
            </nav>
            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label id="aside-header"></label></li>


            <li><a>{{user.nome_frequentador}}</a></li>
                <li><a ng-click="verMensagens()">Mensagens</a></li>
                <li><a ng-click="verFavoritos()">Favoritos</a></li>
                <li><a ng-click="ficarInvisivel()" ng-show="visible">Invis&iacute;vel</a></li>
                <li><a ng-click="ficarVisivel()" ng-show="invisible">Vis&iacute;vel</a></li>
                <li><a ng-click="verUsuariosBloqueados()">Usu&aacute;rios Bloqueados</a></li>
                <li><a ng-click="sugerir()">Sugest&atilde;o</a></li>
                <li><a ng-click="logout()">Sair</a></li>
            </ul>
        </aside>
    </div>      
    <section id="main-container-minha-fila">
        <div class="row" id="estabelecimento-info">
            <div class="columns small-3 left" id="estabelecimento-logo">
                <img src="http://homologa.boadahora.com.br{{fila.logo}}"></img>
            </div>
            <div class="columns small-9" id="fila-info">
                <h6>{{fila.estabelecimento.nome}}</h6>
                <h6>{{fila.nome_fila}}</h6>
                <strong>Tempo de espera: </strong><span>{{fila.tempo_estimado}}</span>
            </div>
        </div>
        <div class="user-list-container row">
            <button id="deixar-fila" class="button alert radius" ng-click="deixarFila()">Deixar Fila</button>
        </div>
        <div class="row" id="minha-entrada">
            <h6 id="nome-entrada-frequentador">{{fila.frequentador}}</h6>
            <div id="minha-entrada-info">
                <strong>Posi&ccedil;&atilde;o: </strong><em id="minha-posicao">{{position}}</em><br/>
                <strong>Hor&aacute;rio de Entrada: </strong><em>{{fila.horario_entrada}}</em>
                <br/>
                <span ng-show="fila.respondeu">
                    <strong>Token: </strong><em>{{token}}</em>
                </span>
            </div>
        </div>
    </section>
    <a class="exit-off-canvas"></a>
</div>

NavigationController

(function updateQueue(){
        $http.post(url,dataQuery{
            headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
        }).success(function(data, status, headers, config){
            if(data.posicao){
                if($scope.queuePosition!== data.position){
                    $scope.estaEmFila = true;
                    $scope.fila = data.fila;
                    $scope.$emit('positionChanged', data.posicao);
                }
                $scope.queuePosition= data.position;
                $timeout(updateQueue, 5000);
            }else{
                $scope.queuePosition= 0;
                $scope.estaEmFila = false;
            }
        }).error(function(data, status, headers, config){
            console.log(data)
        });
    })();

QueueController

$scope.$on('positionChanged', function(e, data){
        $scope.position = data;
    })

问题是：我需要每次更新队列中的用户位置，并且最好的位置是在标题中，然后，如果用户在他的队列屏幕中，它将自动更新，因为NavigationController发出positionChanged事件。一切都工作正常，模型得到更新，但是......

QueueController接收事件并正确更新模型，NavigationController，发送事件的位置，也正确更新模型（正如您在Chrome检查器中看到的那样），但标题无法正确呈现。有趣的是，如果浏览器选项卡转到后台（浏览器最小化，更改屏幕等等）或者如果我单击/触摸屏幕中的某个位置，一切都会完美呈现，如下所示（仅更改选项卡然后获得回）。

我不知道造成这种情况的原因是什么，任何人都可以帮助我吗？