Videogular: dynamic posters not working

Question

I'm iterating over videos and trying to set a poster for each, dynamically:

index.html

<div ng-controller="VideoController as controller" class="carousel-cell carousel__slide" data-ng-repeat="tpl in templates track by $index">
    <div class="videogular-container">
        <videogular vg-theme="controller.config.theme.url">
            <vg-media vg-src="controller.config.sources"
                          vg-tracks="controller.config.tracks"
                          vg-native-controls="true">
            </vg-media>
          <vg-poster
            vg-url="'{{ tpl.image }}'">
          </vg-poster>
          <vg-overlay-play></vg-overlay-play>
        </videogular>
    </div>
</div>

video.controller.js

'use strict';

angular.module('video', [])
.controller('VideoController',
["$sce", function($sce) {

  this.config = {
            preload: "none",
            sources: [
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
            ],
            theme: {
                url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
            }
        };
  ...

However, the rendered HTML is as such:

<vg-poster vg-url="'http://example.net/my-dynamica-image.jpg'" class="ng-isolate-scope"><img ng-src="{{ tpl.image }}" ng-class="API.currentState" src="{{ tpl.image }}" class="stop"></vg-poster>

Note that it works on vg-ur but not on ng-src.

Any clues?

Answer 1

Directive vg-url is expecting an angular expression, so you can left as tpl.image:

<div ng-controller="VideoController as controller" class="carousel-cell carousel__slide" data-ng-repeat="tpl in templates track by $index">
    <div class="videogular-container">
        <videogular vg-theme="controller.config.theme.url">
            <vg-media vg-src="controller.config.sources"
                          vg-tracks="controller.config.tracks"
                          vg-native-controls="true">
            </vg-media>
          <vg-poster
            vg-url="tpl.image">
          </vg-poster>
          <vg-overlay-play></vg-overlay-play>
        </videogular>
    </div>
</div>

http://videogular.com/docs/#/api/com.2fdevs.videogular.plugins.poster.directive:vgPoster