title: AngularJS - issue when embedding Youtube video with directive
body: <p>So I basically copied and pasted the code from this</p>
  
  <p><a href="http://plnkr.co/edit/0N728e9SAtXg3uBvuXKF?p=preview" rel="nofollow">http://plnkr.co/edit/0N728e9SAtXg3uBvuXKF?p=preview</a></p>
  
  <p>To embed a youtube video.</p>
  
  <p>It all works well, but now I'm trying to embed a youtube video where the "youtube video ID" is retrieved via service.</p>
  
  <p>So in my controller, I do something like</p>
  
  <pre><code>  APIService.getVideo($stateParams.videoId).then(function(video) {
      $scope.code = video.youtube_video_id;
    });
  </code></pre>
  
  <p>And in my template, I have</p>
  
  <pre><code>&lt;div my-youtube code="code"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But this is not working. </p>
  
  <p>Basically, in the directive,</p>
  
  <pre><code>app.directive('myYoutube', function($sce) {
    return {
      restrict: 'EA',
      scope: { code:'=' },
      replace: true,
      template: '&lt;div style="height:400px;"&gt;&lt;iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&lt;/div&gt;',
      link: function (scope) {
        scope.$watch('code', function (newVal) {
          if (newVal) {
            scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
          }
        });
      }
    };
  });
  </code></pre>
  
  <p>where there is <code>src="{{url}}"</code> I get <code>"localhost/myapp/{{url}}" does not exist.</code></p>
  
  <p>How do I get around this?</p>