title: cannot load file in iframe getting error: Can't interpolate: {{file}}
body: <p>I want to load a file in iFrame 
  But i was getting an error like </p>
  
  <pre><code>angular.js:13642 Error: [$interpolate:interr] Can't interpolate: {{file}}
  Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL: http://localhost:4000/api/uploads/574ed76718153dac202679b9_resume.pdf
  </code></pre>
  
  <p>For this i have found the solution that to use the below code in controller</p>
  
  <pre><code>$scope.trustSrc = function(src) {
          return $sce.trustAsResourceUrl(src);
      }
  </code></pre>
  
  <p>but the problem i m facing here is 
  it is going on executing like a non-terminating loop, and the file is also not getting loaded.</p>
  
  <p>here is my html </p>
  
  <pre><code>&lt;div ng-class="{'col-xs-6': myVar=='something'}"&gt;
  &lt;div class="panel panel-default panel-height" ng-repeat="candidateInfo in aCandidateDetails track by $index" ng-click="fnInterviewView(candidateInfo.name)"&gt;
      &lt;div class="panel-heading header-background"&gt;
          &lt;div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" class="stop-watch"&gt;&lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-xs-2"&gt;&lt;a style="cursor:pointer" class="pull-right"&gt;{{candidateInfo.name}}&lt;/a&gt;&lt;/div&gt;
              &lt;div class="col-xs-offset-9"&gt;&lt;a  style="cursor:pointer" ng-click="fnVar(candidateInfo.name,candidateInfo.filepath);$event.stopPropagation()" data-toggle="collapse" data-target="{{'#'+toggle}}"&gt;{{candidateInfo.name}} resume&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>angular.module('hrPortalApp')
  .controller('candidateInterviewCtrl', function($scope, $state, $sce, getCandidateInterviewListService) {
      getCandidateInterviewListService.fnGetCandidateDetails(name).then(function(response) {
          $scope.aCandidateDetails = response;
          console.log(response);
          $scope.toggle = "accor"
      });
      $scope.fnVar = function(name, filepath) {
          $scope.file = "http://localhost:4000/" + filepath;
          $scope.checkVar = !$scope.checkVar;
          if ($scope.checkVar) {
              $scope.myVar = "something";
          } else {
              $scope.myVar = false;
          }
      };
      $scope.fnInterviewView = function(name) {
          $state.go('main.Topics', {
              "candidateDetails": $scope.aCandidateDetails,
              "name": name
          })
      };
      $scope.trustSrc = function(src) {
          return $sce.trustAsResourceUrl(src);
      }
  
  });
  </code></pre>
  
  <p>I dont have an idea where i am going wrong</p>
  
  <p>Any help would be appreciated</p>