title: iFrame doesn't load src when initialized after HTML is rendered
body: <p>So I have a page where I need to embed a youtube trailer in an iFrame, based on what movie/serie has been clicked in the view. For this I use the Youtube Search API. </p>
  
  <p>Right now when the page is loaded, it first gets some data from another API, loads the Youtube API,  and then gets the videoId of the trailer, and assigning it to a <code>$scope</code> variable in the view.</p>
  
  <p>In the view I just got this bit of code:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;iframe width="420" height="315" ng-src="{{video}}" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the controller looks like this:</p>
  
  <pre><code>var serieId = $routeParams.id;
  
      $http.get("http://api.tvmaze.com/shows/" + serieId)
          .success(function (data) {
              console.log(data);
              $scope.name = data.name;
              $scope.img = data.image.medium;
              $scope.rating = data.rating;
              initYTAPI();
              $http.get("http://api.tvmaze.com/shows/" + serieId + "/episodes")
                  .success(function (episodes) {
                      console.log(episodes);
                      $scope.episodes = episodes;
                      var maxSeason = 0;
                      for (var i = 0; i &lt; episodes.length; i++) {
                          if (episodes[i].season &gt; maxSeason) {
                              maxSeason = episodes[i].season
                          }
                      }
  
                      $scope.seasonCount = [];
                      for (var i = 1; i &lt;= maxSeason; i++) {
                          $scope.seasonCount.push(i)
                      }
                  });
          });
  </code></pre>
  
  <p>And the initYTAPI function: </p>
  
  <pre><code>    gapi.client.setApiKey("MY_API_KEY");
      gapi.client.load("youtube", "v3", function(){
          //yt api is ready
          console.log("Api ready");
          var query = $scope.name + " Official Trailer";
          var request = gapi.client.youtube.search.list({
              part: "snippet",
              type: "video",
              q: query,
              maxResults: 1
          });
         request.execute(function(response){
              var base_URL = "https://www.youtube.com/embed/";
              var url = base_URL + response.items[0].id.videoId;
              url = $sce.trustAs($sce.RESOURCE_URL, url);
              console.log(url);
              $scope.video = url;
  
              //Tried to do it with ng-bing-html aswell
              //$scope.trailerHtml = "&lt;iframe width=\"420\" height=\"315\" ng-src=\"url\" frameborder=\"0\" allowfullscreen&gt;&lt;/iframe&gt;";
          });
      });
  </code></pre>
  
  <p>I've inspected the page with developers mode to see if the <code>iFrame</code> get loaded correctly, but it doesn't seem to contain any <code>src</code> (or <code>ng-src</code>) attribute.</p>
  
  <p>I think it has something to do with the view rendering before the javascript gets executed, but I've tried to make a service where the url was already pre calculated, and get the url from there, but that didn't seem to help either.</p>
  
  <p>All help would be appreciated!</p>