Tommy Sollén Tommy Sollén - 1 year ago 80
AngularJS Question

What's wrong with my {{url}}?

In angular.js and ionic framework, I'm trying to list a number of youtube films and I'm trying to input the src from an array.

Here's the data in services.js

var friends = [
{ id: 0, name: 'Omvända ZombieGrodor', url: '//' },
{ id: 1, name: 'Höftlyft', url: '//' },
{ id: 2, name: 'Löparen', url: '//' },


And here's the html:

<div class="list card">
<div class="item item-image item-text-wrap">
<iframe width="385" height="217" src="{{friend.url}}" frameborder="0" allowfullscreen></iframe>
Friend.url: {{friend.url}}

If I hard code an URL in the src field it works. But it won't work with this {{friend.url}} why is that?
Also, if I print out {{friend.url}} (as shown in the code example) it shows up fine!.

Appreciate your help.

I've changed the src to ng-src but it still doesn't work.

<iframe width="385" height="217" ng-src="{{friend.url}}" frameborder="0" allowfullscreen></iframe>

Answer Source

Thank you @noahmonster to pointing me to this thread AngularJS ng-src inside of iframe which had the solution to my problem.

Here's the solution:

<iframe width="385" height="217" src="{{friend.url | trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe>

(note the filter!)

I then added this code into app.js:

.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
    return $sce.trustAsResourceUrl(val);


Now it works like a charm :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download