title: Using iFrames in AngularJS
body: <p>Using <code>Angular 1.2+</code>, I'm trying to work out an "angular" way to load in an iFrame but I can't find any tutorials/any real discussion on this anywhere.</p>
  
  <p>Basically, I have a search page which displays a list of links. Clicking a link should call a function in my controller which loads in data (possibly through the $http service?) to an iFrame while keeping the search results in view.</p>
  
  <p>Here's some rudimentary code (I've never really used <code>iFrames</code> before so apologies if this is just totally wrong)</p>
  
  <p><strong>View</strong></p>
  
  <pre><code>&lt;div ng-controller="searchPage"&gt;
    &lt;div ng-repeat='post in searchResults'&gt;
      &lt;a ng-click="itemDetail(post._infoLink)"&gt;Here's a link!&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="detailView" ng-show="itemShown"&gt;
      &lt;iframe ng-src="detailFrame"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>$scope.itemDetail = function(link){
    $scope.itemShown = true;
    $scope.busy = true;
    $http.get(link).success(function(data){
      $scope.busy = false;
      $scope.detailFrame = data;
    });
  }
  </code></pre>
  
  <p>This code currently gives the error:</p>
  
  <pre><code> XMLHttpRequest cannot load &lt;url&gt;. Origin http://localhost:5000 is not allowed by Access-Control-Allow-Origin. 
  </code></pre>
  
  <p>Something simple along these lines would be ideal. In the (attempted) example above, the search results would stay on the screen and get pushed into a sidebar, while the iFrame loads in an external site (on a different domain) into the bulk of the page.</p>
  
  <p>How can this be achieved with Angular?</p>
  
  <p>Extra caveat: The links to load into the iFrame are affiliate links so they'll often have a 'middleman' domain between them, e.g. the clicked-link will be <code>mydomain.com/cloakinglink</code> which redirects to <code>www.zanox.com/whatever</code> which then leads to the final site, <code>www.asos.com/whatever</code>. </p>