Setting `iframe src` not working through scope but works by hard coded - how to solve this?

Question

I am getting iframe url from server. after i receive that, i am setting to `iframe' as like this:

<iframe ng-src="{{video}}" frameborder="0"></iframe> //without quote

But not working at all. in case if I hard-code the same value it's working fine. even i have tried like this:

<div class="content">

        {{video}} //i am getting path correctly

        <iframe ng-src="{{'video'}}" frameborder="0"></iframe>


    </div>

what is the issue here?

I am gettting this error :

http://errors.angularjs.org/1.4.9/$interpolate/interr?p0=%7B%7Bvideo%7D%7D&p1=Error%3A%20%5B%24sce%3Ainsecurl%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.9%2F%24sce%2Finsecurl%3Fp0%3Dhttp%253A%252F%252Flivecam.mktimelapse.com%252Fkhalifa-stadium2

Answer 1

This happens because of security policy imposed from angular 1.2.

Try to make your link trustable

Like this

add module ngSanitize

var app=angular.module("app", ['ngSanitize']);

then inject $sce in your controller

function MyController($scope,$sce) {

Then make your link trustable

$sce.trustAsResourceUrl(video);

DEMO