title: Angular facebook-comments directives
body: <p>I'm relatively new to Angular, so maybe what I ask is really simple.
  I want to load a Facebook comment box, my idea is to do this with a Angular directive.</p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;div class="comments"&gt;
  &lt;div id="fb-root"&gt;&lt;/div&gt;
  &lt;script&gt;(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/nl_NL/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
  &lt;/script&gt;
  &lt;facebook-Comments href="{{track.share_url}}"&gt;&lt;/facebook-Comments&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my directive:</p>
  
  <pre><code>angular.module( "CommentsDirectiveModule", [] )
  .directive("facebookComments", function () {
    return {
        restrict: "E",
        scope: {
            code: "@href",
        },
        replace: true,
        template: '&lt;fb:comments href="{{ur}}" width="300" numposts="5" colorscheme="light"&gt;&lt;/fb:comments&gt;',
        link: function(scope) {
          scope.$watch("code", function (newVal) {
            if (newVal) {
              scope.url = $sce.trustAsResourceUrl(newVal);
            }
          });
        }
    };
  } );
  </code></pre>
  
  <p>The <code>{{track.share_url}}</code> is passed to the directive and back to html. But the problem is that there is no Facebook comment box.</p>
  
  <p>Does anyone no the reason for this problem?</p>