Home » Angularjs » Angular JS dynamic ng-src not working in 1.2.0-rc.2

Angular JS dynamic ng-src not working in 1.2.0-rc.2

Posted by: admin November 30, 2017 Leave a comment


I’m trying to implement a video element in an angular JS app and the ng-src won’t read the scope variable

I’m using 1.2.0-rc.2

<!DOCTYPE html>
<html ng-app="ngView">

   <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>

   var app = angular.module('ngView', []);
   function MyControl($scope){
      $scope.file = '1234.mp4';
  <body ng-controller="MyControl">
      <video controls  ng-src="http://www.thebigdot.com/{{file}}"></video>

If I use a much older version AngularJS lib, it works.

cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js (works)

Is this a bug in the latest release or has it been disabled on purpose? What is the work around ?


after a bit of debugging I found that the error is this:

Error: [$interpolate:noconcat] Error while interpolating: http://www.thebigdot.com/{{file}}
Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required. See http://docs.angularjs.org/api/ng.$sce

at http://code.angularjs.org/1.2.0-rc.2/angular.js:78:12
at $interpolate (http://code.angularjs.org/1.2.0-rc.2/angular.js:6953:17)
at attrInterpolateLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:5367:27)
at nodeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:5121:13)
at compositeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4640:15)
at nodeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:5115:24)
at compositeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4640:15)
at compositeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4643:13)
at publicLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4549:30)
at http://code.angularjs.org/1.2.0-rc.2/angular.js:1157:27 angular.js:7861

this article explains what is going on and how to disable the Strict Contextual Escaping: http://docs.angularjs.org/api/ng.$sce


Angular 1.2 ships with Strict Contextual Escaping (SCE) enabled by default. You need to tweak your code slightly to make it work.


Change the markup so that the ng-src binds to a variable and not a URL + variable as you had it setup before:

<video controls ng-src="{{videoUrl}}"></video>


Add $sce to inject the SCE provider and use the $sce.trustAsResourceUrl method to set videoUrl.

function MyControl($scope, $sce) {
    var videoUrl = 'http://www.thebigdot.com/1234.mp4';
    $scope.videoUrl = $sce.trustAsResourceUrl(videoUrl);

Here’s a JS Bin demo of this setup in action.


I build this directive

app.directive('loadAudio', function($parse) {
  return {
    restrict: 'EA',
    scope: {
        source: '=',       
    template: '<audio />',
    link: function(scope, iElement, iAttrs) {

      scope.$watch('source', function(value) {
        var audio = iElement.find('audio');

        audio.attr('src',  value);
      }, true);

And next is what I write on the template

<load-audio source="your_src" ></load-audio>


I did simple hack before I found previous post. Somebody could found this useful


<div id="videoTag"></div>


document.getElementById("videoTag").innerHTML = "<video width='auto' height='auto' controls autoplay src=" + $scope.details.preview + ">Your browser does not support video</video>";


I had the same problem with version 1.5.0 of angular. When I changed version (I took the 1.4.8 release) my problem was solved.

        function($scope,$stateParams,DepartementFactory) {
            $scope.currentDate=new Date();
<div class="work">
        <img src="images/{{departements.logo}}" class="media" alt=""/>
        <div class="caption">
            <div class="work_title">