ngIf doesn't update with variable

Question

I have a very simple ng-if construction using two MD buttons and one AngularJS scope variable isPlaying. 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.

HTML/MD/PHP:

<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>
<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>
</md-button>

JS:

$scope.play = function () {
    player.playVideo();
    $scope.isPlaying = true;
}

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

Answer 1

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() {
    console.log(player);
    if (player.getPlayerState() === 1)
        $scope.isPlaying = true;
    else
        $scope.isPlaying = false;
    $timeout(onPlayerStateChange, 500);
}