How to Show and Hide My Image and Video Section Without ng-click in AngularJS

Question

I am working online courses project. I have multiple courses fetch from data with the unique id. And My courses Id have images or video. When I clicked on my courses Id then it redirects to this page(blow code) in this page I have two section one is for images and second is for video but I want to image section hide when my video course Id run and similarly another hide. Please help me. Thanks in Advance!!!

//pptLesson.html
    <!-- Images Section -->
    <section ng-show="isImageIdClicked">
        <div class="container" >
            <div class="row" ng-init="image()">
                <div class="col-md-12" ng-repeat="img in images">
                    <div class="mySlides">
                        <!-- <div class="numbertext">{{img.id}}</div> -->
                        <img class="size-i" src="{{img.oe_images}}" ng-show="isActive($index)" type="image" style="width:100%;">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <a class="prev" ng-click="showPrev()" style="font-size:36px;">❮</a>
                        <a class="next" ng-click="showNext()" style="font-size:36px;">❯</a>
                        <div class="row paddi">
                            <div class="column" ng-repeat="img in images">
                                <div>
                                    <img class="demo cursor border-demo" ng-src="{{img.oe_images}}" type="image" ng-show="isActive($index)"
                                         style="width:100%; display: block !important;" data="{{img.id}}"
                                        ng-click="currentSlide(img.id)" alt="{{img.oe_images}}" type="image">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>    

    <!-- Video Section -->
    <section ng-show="isVideoIdClicked">
        <div class="container" id="myCarousel" >
            <div class="row" ng-init="image()">
                <div class="col-md-12">
                    <div class="mySlides" ng-repeat="img in images">
                        <!-- <div class="numbertext">{{img.id}}</div> -->
                        <div>
                            <video width="100%" id="video" controls="controls" ng-show="isActive($index)">
                                <source ng-src="./assets/vdo/{{img.oe_images}}" type="video" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <a ng-click="showPrev()" class="carousel left" href="#myCarousel" style="font-size:36px;float:left;padding: 50px 0px;">❮</a>
                        <a ng-click="showNext()" class="carousel right" href="#myCarousel" style="font-size:36px;float:right;padding: 50px 0px;">❯</a>
                        <div class="row paddi">
                            <div class="column" ng-repeat="img in images">
                                <div>
                                    <video controls="controls" ng-src="./assets/vdo/{{img.oe_images}}"
                                        type="video/mp4" ng-show="isActive($index)" style="width:100%"></video>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--./Video Section -->
Controller

    /*-----Redirect to perticular course start by id---------*/
         $scope.getCourse  =function(id){
            window.localStorage.setItem('id',id);
            $window.location ="pptLesson.html";
        };
         /*-----./Redirect to perticular course start by id---------*/

         /*-----PPT Images/Videos---------*/
         $scope.image = function(){
            var id=window.localStorage.getItem('id');
            $http.get(baseURL+'pptImagesById/'+id).then(successCallback, errorCallback);

            function successCallback(response){
                console.log(response.data);
                $scope.images=response.data;
                window.localStorage.setItem('img_l',$scope.images.length);
                console.log($scope.images.length);
            }
            function errorCallback(error){
                console.log(error);
            }   
         };
         /*-----./PPT Images/videos---------*/

Answer 1

1. You need to declare one variable of type boolean which will check whether image id was clicked or video id. Eg. $scope.isImageIdClicked = true;

2. You need to alter variable value when you click on image id or video id. If image id is clicked then set that variable(isImageIdClicked) to true and if video id is clicked then set that variable to false.

3. Assign isImageIdClicked variable to ng-show="isImageIdClicked" condition in img tag and ng-show="!isImageIdClicked" to div where your video tag is present.