I have an unordered list and when clicking on each ListItem it calls setActive()
<li ng-repeat="slide in data" ng-click="setActive(slide.slideIndex)">
<span class="listItemText">
<b>{{slide.slideIndex + 1}}. </b>{{slide.Title}}
</span>
</li>
setActive() is:
$scope.setActive = function(id)
{
$scope.currentIndex = id;
}
When I click on the List Items I update an image:
<img id="slide" ng-src="resources/slides/slide{{currentIndex + 1}}.jpg" />
That all works fine
What isn't working is I have a video player that at certain times I need to update $scope.currentIndex
I thought this would work fine:
player.addEventListener("timeupdate", function()
{
currentTime = player.currentTime;
angular.forEach($scope.data, function(value, key)
{
if (currentTime >= $scope.data[key].time && currentTime <= $scope.data[key].time + 0.3 && $scope.currentIndex != key)
{
console.log("load id:" + key);
$scope.setActive(key); //Calling what works when I click a listItem
}
});
});
The console.log works and logs at the cue points, however, the image doesn't update until I MouseOver the list. At that point, the image will update to whatever $scope.currentIndex happens to be. I am totally lost on this. Any ideas?
Because you are updating your model outside of the typical Angular execution context, you need to use scope.$apply() so that Angular knows that it needs to run $digest and potentially update the view. See more about $apply here:
Basically, if you wrap your call to setActive in $apply, then Angular will know that it needs to update the view. This should do the trick:
player.addEventListener("timeupdate", function()
{
currentTime = player.currentTime;
angular.forEach($scope.data, function(value, key)
{
if (currentTime >= $scope.data[key].time && currentTime <= $scope.data[key].time + 0.3 && $scope.currentIndex != key)
{
console.log("load id:" + key);
// Wrap the call in $apply so Angular knows to call $digest
$scope.$apply(function() {
$scope.setActive(key);
});
}
});
});