How to set an iframe src attribute from a variable in AngularJS

I suspect looking at the excerpt that the function trustSrc from trustSrc(currentProject.url) is not defined in the controller.

You need to inject the $sce service in the controller and trustAsResourceUrl the url there.

In the controller:

function AppCtrl($scope, $sce) {    // ...    $scope.setProject = function (id) {      $scope.currentProject = $scope.projects[id];      $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);    }}

In the Template:

<iframe ng-src="{{currentProjectUrl}}"> <!--content--> </iframe>

It is the $sce service that blocks URLs with external domains, it is a service that provides Strict Contextual Escaping services to AngularJS, to prevent security vulnerabilities such as XSS, clickjacking, etc. it's enabled by default in Angular 1.2.

You can disable it completely, but it's not recommended

angular.module('myAppWithSceDisabledmyApp', [])   .config(function($sceProvider) {       $sceProvider.enabled(false);   });

for more infohttps://docs.angularjs.org/api/ng/service/$sce

this way i follow and its work for me fine, may it will works for you,

<iframe class="img-responsive" src="{{pdfLoc| trustThisUrl }}" ng-style="{                height: iframeHeight * 0.75 + 'px'            }" style="width:100%"></iframe>

here trustThisUrl is just filter,

angular.module("app").filter('trustThisUrl', ["$sce", function ($sce) {        return function (val) {            return $sce.trustAsResourceUrl(val);        };    }]);