AngularJs e Facebook Comentários

Eu estou tentando atualizar dinamicamente a revisão do facebook no meu html, no entanto, não está mostrando, siga meu Plunker.

O QUE pode ser feito para renderizar os comentários?

http://plnkr.co/edit/ggt7r0 
 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.fbComments = '
'; });
     AngularJS Plunker document.write('');      
(function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.4"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));

LO0fC7XWJMts2P

O SDK analisa seu documento para elementos que serão substituídos por plug-ins sociais apenas uma vez na boot.

Se você adicionar conteúdo mais tarde, precisará chamar FB.XFBML.parse para que ele passe pelo documento (ou partes dele) novamente.

Eu fiz alguns testes e acabei fazendo uma diretiva e usando o FB.XFBML.parse () , segue o exemplo trabalhando no Plunker:

http://plnkr.co/edit/oTj3jP

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.fbComments = 'http://developers.facebook.com/docs/plugins/comments/'; }); app.directive('fbCommentBox', function() { function createHTML(href, numposts, colorscheme, width) { return '
' + '
'; } return { restrict: 'A', scope: {}, link: function postLink(scope, elem, attrs) { attrs.$observe('pageHref', function(newValue) { var href = newValue; var numposts = attrs.numposts || 5; var colorscheme = attrs.colorscheme || 'light'; var width = attrs.width || '100%'; elem.html(createHTML(href, numposts, colorscheme, width)); FB.XFBML.parse(elem[0]); }); } }; });
     AngularJS Plunker