Videogular - show image or video

I use videogular in my angularjs app. I make list with video and another list with the image. When user select video in list videogular starts playing selected video. But, if user select image from list I want to show selected image in videogular or on the same place (show new div on videogular place, and again if select video hide div with image and show player). I try to use ng-if for hiding player if there is selected image, and if selected video show player again.

When I try this I get an error in the console I get my video list from API

TypeError: Cannot read property 'stop' of null

Here is my code

<videogular vg-player-ready="ctrl.onPlayerReady($API)" vg-complete="ctrl.onCompleteVideo()" vg-theme="ctrl.config.theme.url">
  <vg-media vg-src="ctrl.config.sources" vg-tracks="ctrl.config.tracks">
  </vg-media>
  <vg-controls style="margin-bottom: 20px;">
    <vg-play-pause-button></vg-play-pause-button>
    <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
    <vg-scrub-bar>
    <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
    </vg-scrub-bar>
    <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
    <vg-volume>
    <vg-mute-button></vg-mute-button>
    <vg-volume-bar></vg-volume-bar>
    </vg-volume>
    <vg-fullscreen-button></vg-fullscreen-button>
    </vg-controls>
    <vg-overlay-play></vg-overlay-play>
    <vg-poster vg-url='ctrl.config.plugins.poster'></vg-poster>
</videogular>

And here is list where I show videos from API

<table class="table">
<tr ng-repeat="(key, value) in media" ng-if="value.type === 'video'">
<td width="20%">
  <a ng-click="ctrl.setVideo(key)">
  <img src="{{value.thumbnail}}" alt="" /></a>
</td>
<td width="50%">
  <a ng-click="ctrl.setVideo(key)">{{value.name}}</a>
</td>
<td width="15%">
  <a ng-click="ctrl.setVideo(key)">{{value.type}}</a>
</td>
<td width="15%">
  <angular-smartconfirm confirm="removeRow(value.id)">
    <i class="fa fa-close"></i>
    </smart-confirm>
</td>

........And same for a new table with for images.

and controller

  $http.get(serviceBase + 'users/' + user_id + '/media').success(function 
   (data) {
   $scope.media = data.media;
    angular.forEach($scope.media, function (value, key) {
        mediaUrl.push(value.url);
        mediaName.push(value.name);
        mediaType.push(value.type);
        temp = value.url;
        srcName[temp] = value.name;
        sources.push({
            sources: [
                {src: $sce.trustAsResourceUrl(value.url), type: "video/mp4"}
            ]
        });

    });


    controller.videos = sources;
    controller.config = {
        preload: "none",
        autoHide: false,
        autoHideTime: 3000,
        autoPlay: false,
        theme: {
            url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
        },
        plugins: {
            poster: "assets/img/video_poster.png"
        }
    };

    controller.setVideo = function (index) {
        controller.API.stop();
        controller.currentVideo = index;
        controller.config.sources = controller.videos[index].sources;
        $timeout(controller.API.play.bind(controller.API), 100);
    };

});

I try to add all <videogular>...</videogular> inside div and add ng-if="value.type == 'video'" (i get from API type video or image)

<div nf-if="value.type == 'video'">
    <videogular>...</videogular>
</div>

and if a type is image show new div on same place with container for image

<div nf-if="value.type == 'image'">
    <img src="">
</div>

Thnx, and sry for too much text and code

Solution

Here is the answer. I make two function for hide and unhide videogular player

 $scope.hideVideogulrPlayer = function() {
  $scope.hidePlayer = false;

}
$scope.unhideVideogulrPlayer = function() {
  $scope.hidePlayer = true;
}

When we click on video list on any video I call a function on

ng-click="unhideVideogulrPlayer()"

When we click on image list on any image I call a function

ng-click="hideVideogulrPlayer()"

And in DOM I make two div. First div with videogular

 <div class="videogular-container" ng-if="hidePlayer == true">
     <videogular>...</videogular>
 </div>

and second for image ...

<div class="videogular-container" ng-if="hidePlayer == false">
     <img middle;" src="{{imageWhenPlayerIsHide}}" width="432px">
 </div>

With this, when we click on a video, videogular player is unhiding and start playing. When clicking on the image, I show div with the same size as a player, and with function, show clicked the image in that div

$scope.showSelectedImage = function (url){
  /* I pass url from ng-repat */
  $scope.imageWhenPlayerIsHide = url;
}