angular ng-bind-html doesn't work with youtube embed

ng-bind-html is working with youtube embed you just need to add $sce.trustAsHtml(value) on value that is fetching the <iframe> i have modified your code Check out the plunker ..for the solution

index.html

<div ng-app="App1">
  <div ng-app="App1" ng-controller="Ctrl">
    <H1>This is a youtube Embeded Video</h1>
      <div ng-bind-html="youtube"></div>
  </div>
</div>

script.js

var myApp = angular.module('App1', ['ngSanitize']);

myApp.controller('Ctrl', ['$scope','$sce', function($scope,$sce){
    $scope.youtube = $sce.trustAsHtml('<iframe width="560" height="315" src="//www.youtube.com/embed/FZSjvWtUxYk" frameborder="0" allowfullscreen></iframe>');


}]);

As you are trying to add HTML into your JS, you should sanitize the code (Why you ask?). To do that in Angular, you need to require the sanitize module. Add this to your head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-sanitize.js"></script>

And add this to your module:

var myApp = angular.module('spicyApp1', ['ngSanitize']);

Update And now I see that you also tried to add the link into the text (silly of me to oversee that). You can find the correct way to do in this article on Stackoverflow. A work around (but not advised) is to ng-bind-html a span element. See updated example on JSFiddle

thanks to IvorG, I was able to assemble the following solution (jsfiddle):

<div ng-app="App1">
  <div ng-app="App1" ng-controller="Ctrl">
      <div ng-bind-html="youtube">
      </div>
       <p >this is a {{youtube}}</p>
      <p show-data='' youtube="{{youtube}}"></p>
    <button ng-click="showContent()">Show the Content</button>
    </div>
</div>

script

var myApp = angular.module('App1', ['ngSanitize']);

myApp.controller('Ctrl', ['$scope', function($scope){
    $scope.youtube = 'tmp content';
    $scope.showContent = function () {
        $scope.youtube = '<iframe width="560" height="315" src="//www.youtube.com/embed/FZSjvWtUxYk" frameborder="0" allowfullscreen></iframe>';
    };
}]);

myApp.directive( 'showData', function ( $compile ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {
      var el;

      attrs.$observe( 'youtube', function ( tpl ) {

        if ( angular.isDefined( tpl ) ) {
          // compile the provided template against the current scope
          el = $compile( tpl )( scope );


          // stupid way of emptying the element
          element.html("");

          // add the template content
          element.append( el );
        }
      });
    }
  };
});

js code:

var myApp = angular.module('App1', ['ngSanitize']);
myApp.filter('sanitizer', ['$sce', function($sce) {
        return function(url) {
            return $sce.trustAsHtml(url);
        };
}]);

myApp.controller('Ctrl', ['$scope', function($scope){
$scope.youtube = '<iframe width="560" height="315"    src="//www.youtube.com/embed/FZSjvWtUxYk" frameborder="0" allowfullscreen> </iframe>';

}]);

html code:

<div ng-app="App1">
<div ng-app="App1" ng-controller="Ctrl">
<H1>This is a youtube Embeded Video</h1>
  <div ng-bind-html="youtube | sanitizer"></div>
</div>
</div>

This works for me.