title: AngularJS ng-src inside of iframe
body: <p>I have a problem using ng-src inside of an iframe. I need to do this:</p>
  
  <pre><code>&lt;div class="tab-content"&gt;
          &lt;ul class="nav nav-tabs" ng-repeat="document in issues.Document"&gt;
              &lt;div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}"&gt;
                  &lt;iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%"&gt;&lt;/iframe&gt;                    
              &lt;/div&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>RESULT:</p>
  
  <pre><code>&lt;iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%" src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>I know that the problem is $sce, which is a protection from XSS, and that the link needs to be added to the whitelist... So it is working when I do this.</p>
  
  <pre><code>&lt;ul class="nav nav-tabs" ng-repeat="document in issues.Document"&gt;
      &lt;div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}"&gt;
           &lt;iframe ng-src="{{someUrl}}" height="100%" width="100%"&gt;&lt;/iframe&gt;                    
       &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And I define inside the controller: </p>
  
  <pre><code>$rootScope.someUrl = $sce.trustAsResourceUrl('http://192.168.223.110/cat/files/incoming/12345_3232ASD_pero.pdf');
  </code></pre>
  
  <p>But I can't do it like that because I'm looping with ng-repeat, so the link is generated dynamically. It need's to be readable from the database!</p>