# 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?

Source: AngularJS