Videogular : Unable to add videos dynamically

Question

I'm developing an application using Ionic and in that I'm allowing user to upload videos. So for playing videos I have integrated Videogular library.

Controller Code

$scope.videoAPI = null;

   $scope.config = {
       playsInline: false,
       preload: "auto",
       autoHide: false,
       autoHideTime: 3000,
       autoPlay: true,
       sources: [],
       theme: "lib/videogular-themes-default/videogular.css",
       plugins: {
           poster: "http://www.videogular.com/assets/images/videogular.png"
       }
   };

   $scope.onPlayerReady = function(api) {
       console.log('onPlayerReady : : ', api);
       $scope.videoAPI = api;
   }


   $scope.uploadVideo = function() {
       if (!deviceType) {
           $('#fileSelect').val('').click();
       } else {
           console.info('Uploading Video..');
           MediaService.browseVideo().then(function(uploadResponse) {
               console.info('video uploadResponse : : ', uploadResponse);
               var response = JSON.parse(uploadResponse.response);
               var videoUrl = response.url.video[0].location;

               //Here I'm Dyncamically setting the URL of my video
               $scope.config.sources.push({
                   src: $sce.trustAsResourceUrl(videoUrl),
                   type: 'video/mp4'
               });
               console.info('Video Uploaded..');
           }).catch(function(error) {
               console.warn('Error while fetching video ', error);
               $scope.showAlert('Video Upload', error);
           });
       }
   };

While uploading video $scope.config.sources is updating properly. But when I inspect the DOM I don't get the video there..Here is screenshot

So what should I do to make this work?

Answer 1

Finally solved it..The issue was I was pushing the object to the $scope.config.sources

Before

$scope.config.sources.push({
     src: $sce.trustAsResourceUrl(videoUrl),
     type: 'video/mp4'
 });

After

$scope.config.sources =[{
    src: $sce.trustAsResourceUrl(videoUrl),
    type: 'video/mp4'
}];

I think videogular doesn't deep watch the $scope.config object. So instead of pushing into source object I have to reinitialize the source every time.