Sajeetharan Sajeetharan - 7 months ago 26
AngularJS Question

Load an URL inside an iFrame in AngularJS app

I am loading a url in an angular application inside an iframe. Here is my code:


<div layout="column" flex class="content-wrapper" id="primary-col">
<md-content layout="column" flex class="md-padding">
<div class="cell">
<iframe ng-src="{{selected.imgurl}}" >


var routerApp =angular.module('DiginRt', ['ngMaterial'])
routerApp.controller('AppCtrl', ['$scope', '$mdSidenav', 'muppetService', '$timeout','$log', function($scope, $mdSidenav, muppetService, $timeout, $log) {
var allMuppets = [];

$scope.selected = null;
$scope.muppets = allMuppets;
$scope.selectMuppet = selectMuppet;
$scope.toggleSidenav = toggleSidenav;


// Internal Methods
function loadMuppets() {
allMuppets = muppets;
$scope.muppets = [].concat(muppets);
$scope.selected = $scope.muppets[0];

function toggleSidenav(name) {

function selectMuppet(muppet) {
$scope.selected = angular.isNumber(muppet) ? $scope.muppets[muppet] : muppet;

routerApp.service('muppetService', ['$q', function($q) {
var muppets = [{
name: 'Product Report',
iconurl: '',
imgurl: '',
content: ' '
}, {
name: 'Invoice Report',
iconurl: '',
imgurl: '',
content: ''
} ];

// Promise-based API
return {
loadAll: function() {
// Simulate async nature of real remote calls
return $q.when(muppets);

It rerurns an error saying
Error: [$interpolate:interr] Can't interpolate: {{selected.imgurl}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.

Here is the


You need to sanitize URL using $sce API, by using that you need to make that URL as trusted by calling method trustAsResourceUrl.


$scope.trustSrc = $sce.trustAsResourceUrl;


<iframe ng-src="{{trustSrc(selected.imgurl)}}"></iframe>

Don't forget to add $sce dependency on your controller.

Working Plunkr with you code

Hope this could help you. Thanks.