Angular js scope var value in iframe

Question

I am working with angular js . I have a controller "youTubePlayerCtrl", in this controller i have $scope.videoID which contains the youtube video id. I am able to get this value in belows div in h1 block . but i am not able to get {{videoID}} in iframe, can any one help me how to fix this.

<div ng-controller="youTubePlayerCtrl">
    <h1>{{videoID}}</h1>
    <iframe class="youtube-player" type="text/html" width="auto"
        height="auto" src="http://www.youtube.com/embed/{{videoID}}"
        allowfullscreen frameborder="0"> </iframe>
</div>

This is the error log:

[$interpolate:noconcat] http://errors.angularjs.org/undefined/$interpolate/noconcat?p0=http%3A%2F%2Fwww.youtube.com%2Fembed%2F%7B%7BvideoID%7D%7D at Error () at http://code.angularjs.org/1.2.0-rc.2/angular.min.js:6:453 at g (http://code.angularjs.org/1.2.0-rc.2/angular.min.js:69:467) at b.push.compile (http://code.angularjs.org/1.2.0-rc.2/angular.min.js:54:6) at l (http://code.angularjs.org/1.2.0-rc.2/angular.min.js:47:124) at f (http://code.angularjs.org/1.2.0-rc.2/angular.min.js:41:361) at l (http://code.angularjs.org/1.2.0-rc.2/angular.min.js:47:64) at f (http://code.angularjs.org/1.2.0-rc.2/angular.min.js:41:361) at http://code.angularjs.org/1.2.0-rc.2/angular.min.js:40:434 at http://code.angularjs.org/1.2.0-rc.2/angular-route.min.js:7:148 angular.js:7861 (anonymous function)

Jsfiddle (not working)

Thanx

Answer 1

First: you need to use ng-src instead of src as @Cherniv suggested in a comment to your question. Read more here.

Second: you cannot concatenate the URL inside the source attribute for security reasons: you must concatenate the URL in Javascript in a scope variable e.g. fullURL and then ng-src="{{fullURL}}". Read more here.

Third: if Strict Contextual Escaping (SCE) is enabled ‒ and Angular v1.2 ships with SCE enabled by default ‒ you need to whitelist the URLs. Read more here and here.