Sjors Hijgenaar Sjors Hijgenaar - 1 year ago 67
AngularJS Question

ngIf doesn't update with variable

I have a very simple ng-if construction using two MD buttons and one AngularJS scope variable

. However, the ng-if doesn't seem to work along with the variable. I can see the variable changing as I click the buttons, using console tools, however no changes to the DOM. Strangely enough the ng-if does seem to trigger when I hover other Angular components, such as buttons in the main nav.


<md-button class="md-icon-button" ng-if="!isPlaying" ng-click="play()" aria-label="Play">
<md-icon md-svg-src="<?php echo get_stylesheet_directory_uri(); ?>/img/icon/ic_play_arrow_black_24px.svg"></md-icon>
<md-button class="md-icon-button" ng-if="isPlaying" ng-click="pause()" aria-label="Pause">
<md-icon md-svg-src="<?php echo get_stylesheet_directory_uri(); ?>/img/icon/ic_pause_black_24px.svg"></md-icon>


$ = function () {
$scope.isPlaying = true;

$scope.pause = function () {
$scope.isPlaying = false;

Answer Source

The problem was being caused by a function wrapped inside a timeout block. I replaced the setTimeout with $timeout and everything started working fine:

$scope.isPlaying = false;
$scope.videoTime = 0;
function onPlayerStateChange() {
    if (player.getPlayerState() === 1)
        $scope.isPlaying = true;
        $scope.isPlaying = false;
    $timeout(onPlayerStateChange, 500);