title: How to set an iframe src attribute from a variable in AngularJS
body: <p>I'm trying to set the <code>src</code> attribute of an iframe from a variable and I can't get it to work...</p>
  
  <p>The markup:</p>
  
  <pre><code>&lt;div class="col-xs-12" ng-controller="AppCtrl"&gt;
  
      &lt;ul class=""&gt;
          &lt;li ng-repeat="project in projects"&gt;
              &lt;a ng-click="setProject(project.id)" href=""&gt;{{project.url}}&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;iframe  ng-src="{{trustSrc(currentProject.url)}}"&gt;
          Something wrong...
      &lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>controllers/app.js:</p>
  
  <pre><code>function AppCtrl ($scope) {
  
      $scope.projects = {
  
          1 : {
              "id" : 1,
              "name" : "Mela Sarkar",
              "url" : "http://blabla.com",
              "description" : "A professional portfolio site for McGill University professor Mela Sarkar."
          },
  
          2 : {
              "id" : 2,
              "name" : "Good Watching",
              "url" : "http://goodwatching.com",
              "description" : "Weekend experiment to help my mom decide what to watch."    
          }
      };
  
      $scope.setProject = function (id) {
          $scope.currentProject = $scope.projects[id];
          console.log( $scope.currentProject );
  
      }
  }
  </code></pre>
  
  <p>With this code, nothing gets inserted into the iframe's <code>src</code> attribute. It's just blank.</p>
  
  <p><strong>Update 1:</strong>
  I injected the <code>$sce</code> dependancy into the AppCtrl and $sce.trustUrl() now works without throwing errors. However it returns <code>TrustedValueHolderType</code> which I'm not sure how to use to insert an actual URL. The same type is returned whether I use $sce.trustUrl() inside the interpolation braces in the attribute <code>src="{{trustUrl(currentProjectUrl))}}"</code> or if I do it inside the controller when setting the value of currentProjectUrl. I even tried it with both.</p>
  
  <p><strong>Update 2:</strong>
  I figured out how to return the url from the trustedUrlHolder using .toString() but when I do that, it throws the security warning when I try to pass it into the src attribute.</p>
  
  <p><strong>Update 3:</strong>
  It works if I use trustAsResourceUrl() in the controller and pass that to a variable used inside the ng-src attribute:</p>
  
  <pre><code>$scope.setProject = function (id) {
      $scope.currentProject = $scope.projects[id];
      $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
      console.log( $scope.currentProject );
      console.log( $scope.currentProjectUrl );
  
  }
  </code></pre>
  
  <p>My problem seems to be solved by this, although I'm not quite sure why.</p>