angularjs can't assign variable to html5 video src

Question

I got an error of Error while interpolating: videos/{{video.name}} with below code :

<div ng-repeat='video in videos'>
        <div class="col-md-3">
        <video controls>
          <source src="videos/{{video.name}}" type="video/mp4">
          Your browser does not support HTML5 video.
        </video>
        {{video.name}} // this worked
        </div>
    </div>

Tried ng-src too but doesn't work. Strange.

Answer 1

Use this filter,

app.filter("trustUrl", ['$sce', function ($sce) {
        return function (recordingUrl) {
            return $sce.trustAsResourceUrl(recordingUrl);
        };
    }]);

HTML

    <video controls>
      <source src="videos/{{video.name | trustUrl}}" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>

Answer 2

Try this :

Html :

<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat='video in videos'>
        <div class="col-md-3">
        <video controls>
          <source src="videos/{{video.name}}" type="video/mp4">
          Your browser does not support HTML5 video.
        </video>
        {{video.name}} // this worked
        </div>
    </div>
</div>

JS :

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.videos = [
      {"name":"alpha"},
      {"name":"beta"},
      {"name":"gama"}
    ]
});

Working demo!