Q:

DOM not updating with bound $scope object

I have an AngularJS app that I'm trying to utilize an overlay on. Basically, I have a couple of panels, and when the user clicks one, it should set $scope.selectedPanel to the clicked panel, and then show the overlay. Instead, it shows the overlay without updating it via the data-bound $scope.selectedPanel. It DOES update the object, but this change is not reflected in what is displayed to the user.
Calling HTML
<div ng-click="pickPanel(panel);" ng-repeat="panel in panels track by $index">
    <p>{{panel.title}}</p>  
</div>

Javascript to set selectedPanel & initial Variables
$scope.panels = [];

$scope.selectedPanel = "";

$scope.panels.push(
    {panelID:1, 
     title:"Panel #1", 
     room:"",
     startTime: "Friday 2:30 PM",
     endTime: "Friday 3:30 PM",
     hostedBy: "The Host",
     description:"This is a description of the panel"}
);

$scope.panels.push(
    {panelID:2, 
     title:"Panel #2", 
     room:"",
     startTime: "Friday 3:30 PM",
     endTime: "Friday 3:30 PM",
     hostedBy: "The Host",
     description:"This is a description of the panel"}
);

$scope.pickEvent = function(panel){
    setTimeout(function() {     
        $scope.selectedPanel = panel;
        document.getElementById('overlay').style.display = 'block';
     }, 1000);
}

Overlay HTML
<div id="overlay">
    <div id="overlayContainer">
        <div class="card">                          
            <p>{{selectedPanel.title}}</p>              
        </div>
    </div>
</div>

So what seems to be happening is that the first time I click one of the panels, it goes off to the pickEvent method, sets the selected event, and then displays the overlay - however, the overlay is essentially 1 step behind. So when I click the FIRST panel for the first time, the overlay will display a null title. However, if I close it, and click a second panel, then the title of the FIRST panel I picked will be displayed. Then if I pick a third panel, the panel I picked second will be displayed.
Is there something I'm missing with AngularJS, especially where I set my $scope.selectedPanel to the passed panel, that forces a refresh on the overlay HTML?

A:

You are modifying the model without angular knowing about it. Change onclick with ng-click and setTimeout with $resource to let angular handle its bindings.
If you update the model from an external source (onclick, intervals, etc) you have to let angular now that something changed by calling $scope.$apply(), or use ng-click and $timeout instead.

