Refreshing contents of div based on drop down selection (custom directive) in Angularjs

Question

I have a custom directive which is very similar to a drop down. Items in the drop down menu are associated with file names of certain videos. A div below the drop down displays a default video file (I have done this via Videoangular ).

Whenever I make a selection from the drop down menu, I am changing the default variable containing filename (String) to the one I want. But, the same is not reflected in the div.

My objective is to refresh div containing the video with appropriate video whenever a selection is made from the drop down menu.

This is my controller:

angular.module('myApp',
    [
        "ngSanitize",
        "com.2fdevs.videogular",
        "com.2fdevs.videogular.plugins.controls",
        "com.2fdevs.videogular.plugins.overlayplay"
    ]
)
    .controller('ctrl',
        ["$rootScope", "$scope", "$state", "$log", "Restangular",
            function ($rootScope, $scope, $state, $log, Restangular) {

                'use strict';

                var vm  = this;

                //DEFAULT VIDEO FILE NAME
                vm.fields = "WaterCool1";

                this.config = {
                    sources: [
                        {src: "assets/data/"+vm.fields+".mp4", type: "video/mp4"}
                    ]
                };

                vm.loadPage = loadPage;

                vm.coolingSystemTypeSelector = {coolingSystemTypeSelector:{}};


    getAll('cooling-system-type').then(
                        function(objs) {
                            $log.debug("get Cooling System Type", objs);
                            vm.coolingSystemTypeSelector = objs.selector;
                            vm.fields = "WaterCool1";

                            vm.coolingSystemTypeSelector.onSelect = function (selection) {
                                if(!selection){
                                    return;
                                }

                                $log.debug("Cooling System Type Selection == ", selection);
                                if(selection.label==="ACC"){
                                    vm.fields = "AirCool";
                                }else if(selection.label === "WCC-CT"){
                                    vm.fields = "WaterCool1";
                                }else if(selection.label === "WCC-DC"){
                                    vm.fields = "WaterCool2";
                                }

                            };
                        }
                    );
                ///.....
            }
        ]
    );

This is my HTML:

<div>
  <selector form="form" columns=vm.columns target="vm.coolingSystemTypeSelector"></selector>

</div>
<hr>
<div id="refreshThisDiv">
  <!--I want to refresh this div-->
  <videogular vg-theme="vm.config.theme">
    <!--VIDEOGULAR CODE-->
  </videogular>
</div> 

Answer 1

What you need is not to refresh the div. You need angular to refresh the div based on you modifying bound properties.

Your declaration of this.config is actually static and you are never modifying the value of this.config.sources src after instantiation. As that code is running only once it will forever remain as "assets/data/WaterCool1.mp4".

What you need to do instead at least, is to modify this value upon selection of an option in the drop-down. Something like:

// ...
var that = this;
getAll('cooling-system-type').then(

   // ... inside onSelect ...
   if(selection.label==="ACC") {
      that.config.sources = [{src: "assets/data/AirCool.mp4", type: "video/mp4"}];
   }

// ...

Even then, with this code, you might need to trigger a manual $apply as angular may not be aware of your change to the field via this onSelect event handling. Ideally you will be able to bind the event to the function directly in HTML by using ng-change and avoid the need for that.

If you provide a full sample ( https://plnkr.co/edit/ ), it's easier to guide you to a solution and explain in without the need to rewrite your original code.