ng-show not showing after the condition changes to true

Issue

I have an image and a YouTube video in my HTML. When the video is not playing I just want to show the image, and when it's playing I just want to show the video.
When the page opens just the image loads (as expected) and when the play button is clicked the image disapears but the video is not showing. If I delete the ng-show of the video element the video works but the problem is that it also appears with the image when then the page loads (it shouldn't). For the YouTube video I'm using the angular-youtube-mb 1.3.2 version.

HTML

    <div class="video-wrapper">
        <div class="video">
            <img ng-if="!homewelcomeVM.playing && !homewelcomeVM.paused" ng-src="ommited.jpg">
            {{homewelcomeVM.playing}}
            <youtube-video ng-show="homewelcomeVM.playing" video-url="homewelcomeVM.youtubeUrl" player="homePlayer" player-vars="playerVars" player-width="'100%'" player-height="'100%'"></youtube-video>
        </div>
    </div>
    <div class="blck-cnt animate-fade" ng-show="!homewelcomeVM.playing || homewelcomeVM.paused"> 
        <button type="button" class="play play-lg" hvm-analytics-clicks hvm-where-is="'home'" hvm-action="::'CLICK_PLAY_HOME_VIDEO'" ng-click="homePlayer.playVideo()"><i class="ic-svg ic-play-arrow ic-light ic-36"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ic-play-arrow"></use></svg></i></i></button>
    </div>

The control point {{homewelcomeVM.playing}} is updating correctly to true when the play button is pressed.

Controller

        $scope.$on('youtube.player.playing', function ($event, player) {
            vm.playing = true;
            vm.paused = false;
        });

Why the video isn't appearing when the controller variable changes to true?

Solution

You can add div as a parent of youtube-video tag and use ng-show for the div tag:

<div class="video-wrapper">
    <div class="video">
        <img ng-if="!homewelcomeVM.playing && !homewelcomeVM.paused" ng-src="ommited.jpg">
        {{homewelcomeVM.playing}}
        <div ng-show="homewelcomeVM.playing">
            <youtube-video  video-url="homewelcomeVM.youtubeUrl" player="homePlayer" player-vars="playerVars" player-width="'100%'" player-height="'100%'"></youtube-video>
        </div>
    </div>
</div>
<div class="blck-cnt animate-fade" ng-show="!homewelcomeVM.playing || homewelcomeVM.paused">
    <button type="button" class="play play-lg" hvm-analytics-clicks hvm-where-is="'home'" hvm-action="::'CLICK_PLAY_HOME_VIDEO'" ng-click="homePlayer.playVideo()"><i class="ic-svg ic-play-arrow ic-light ic-36"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ic-play-arrow"></use></svg></i></i></button>
</div>

Answered By - Alireza Ahmadi