Videogular - Creating custom poster with additional variables

I am working with an existing Angular site with Videogular as the video player, and I have created two new custom elements (a grey bar DIV that holds text and another that holds a logo). These new DIVs overlay the video poster image and appear/disappear with the poster.

I am using the Videogular poster plugin and have a custom version of it working fine. The layers appear/disappear properly.

What I need is to pass two new variables/values: 1) a text variable that will be inserted into one of the layers overlaying the video and 2) a URL variable for a second image (the first image already working is the poster image itself).

This is the HTML in each page that displays video/poster:

<div class="videogular" mixpanel-track="Video Played" mt-key="Video Name" data-mt-desc="Introduction" mt-video
       box-init box-ratio="1.77">
    <videogular vg-theme="videogular.theme">
      <vg-media vg-src="[{src: sceService.trustAsResourceUrl('http://static.videogular.com/assets/videos/videogular.mp4'), type: 'video/mp4'}]"></vg-media>
      <vg-controls vg-autohide="videogular.autoHide" vg-autohide-time="videogular.autoHideTime">
        <vg-play-pause-button></vg-play-pause-button>
        <vg-scrub-bar>
          <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        </vg-scrub-bar>
        <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="'http://www.videogular.com/img/videogular.png'" vg-text="'this is text that will display in the grey bar overlaying video'" vg-url2="'http://www.videogular.com/img/videogular2.png'"></vg-poster>

    </videogular>
  </div>

Note how the values for both the video (vg-src) and the poster image (vg-url) are defined in the HTML and not the external Videogular javascript.

As you can also see in the HTML above, I need to add a second poster variable (vg-text) for text that will to appear in one of the extra poster layers, and I need a third poster variable (vg-url2) for an image that should appear in one of the two new DIVs that overlay the poster image.

My custom poster JS below displays the poster image and the two new DIVs properly, but I need to pass in values for the content within those DIVs:

"use strict";
angular.module("com.2fdevs.videogular.plugins.poster", [])
.run(
["$templateCache", function ($templateCache) {
    $templateCache.put("vg-templates/vg-poster",
        '<img ng-src="{{vgUrl}}" ng-class="API.currentState">\
          <div class="video-overlay-logo" ng-class="API.currentState">\
            <img ng-src="{{vgUrl2}}">\
          </div>\
          <div class="video-overlay-bar" ng-class="API.currentState">\
              <div ng-src="{{vgText}}" ng-class="API.currentState">   </div>\
          </div>');
}]
)
.directive("vgPoster",
[function () {
    return {
        restrict: "E",
        require: "^videogular",
        scope: {
            vgUrl: "=?"
        },
        templateUrl: function (elem, attrs) {
            return attrs.vgTemplate || 'vg-templates/vg-poster';
        },
        link: function (scope, elem, attr, API) {
            scope.API = API;

            if (API.isConfig) {
                scope.$watch("API.config",
                    function () {
                        if (scope.API.config) {
                            scope.vgUrl = scope.API.config.plugins.poster.url;
                        }
                    }
                );
            }
        }
    }
}]
);

How do I set up my custom poster JS so that it creates a binding between ng-src="{{vgText}}" in the JS and vg-text in the HTML, just like how ng-src="{{vgUrl}} in the JS above picks up the value for vg-url in the HTML? Also, I'll need to pass a value for the final variable, what I've called {{vgUrl2}} above.

Much thanks for any and all pointers.

Add in your DDO scope property whatever variables you need:

.directive("vgPoster",
[function () {
    return {
        restrict: "E",
        require: "^videogular",
        scope: {
            vgUrl: "=?",
            vgUrlAlt: "=?",
            vgText: "=?"
        },
        templateUrl: function (elem, attrs) {
            return attrs.vgTemplate || 'vg-templates/vg-poster';
        },
        link: function (scope, elem, attr, API) {
            scope.API = API;

            if (API.isConfig) {
                scope.$watch("API.config",
                    function () {
                        if (scope.API.config) {
                            scope.vgUrl = scope.API.config.plugins.poster.url;
                        }
                    }
                );
            }
        }
    }
}]
);

And use in your HTML as you use vgUrl.

<vg-poster vg-url="yourUrl" vg-url-alt="yourUrlAlt" vg-text="yourText"></vg-poster>

Note that I created a vgUrlAlt and not vgUrl2 because I don't if it would work with numbers.