title: Embed Youtube video in AngularJS generates error when loading the page
body: <p>The code snippet below is used to embed Youtube video in my page.</p>
  
  <pre><code>&lt;div ng-if="videoUrl != ''" style="height:400px;"&gt;
      &lt;iframe width="100%" height="100%" src="{{videoUrl}}"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my controller, <code>videoUrl</code> is first set to an empty string, and updated once data is retrieved from server.</p>
  
  <pre><code>$scope.videoUrl = '';
  
  videoService.getData().then(function(response) {
      $scope.videoUrl = response.videoUrl;
  });
  </code></pre>
  
  <p>The Youtube player works and the URL is correct, I can watch the video with the embeded player after the page is fully loaded. What bothers me is each time when loading the page, an error is returned. I can see from the browser console that it was trying to send a <code>GET</code> request to <code>http://www.example.com/%7B%7BvideoUrl%7D%7D</code> with its status as <code>(canceled)</code>. This request is not something I want and it fails for sure.</p>
  
  <p>How can I get rid of that weird <code>GET</code> request?</p>