title: Facebook comment plugin Angularjs
body: <p>I am facing a strange error while adding the facebook comment plugin in my AngularJS app. 
  The simplified structure of the app page is</p>
  
  <pre><code>&lt;html ng-app="myapp"&gt;
  &lt;head&gt;
   ...
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
  ...
  &lt;/div&gt;
  &lt;div ng-view&gt;&lt;/div&gt;
  ...
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The page with fb comment box is loaded in ng-view. The structure of page that contains fb comment box is as follows</p>
  
  <pre><code>&lt;div id="fb-comment-box&gt;
   &lt;div class="fb-comments" data-href="http://mydomain.com/page/{{ page.id }}" data-numposts="5" data-colorsheme="light"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>page</code> is angularjs scope variable which comes from controller. When i load this page in browser and do inspect element. It shows the correct page id i.e. data-href is </p>
  
  <pre><code>data-href = "http://mydomain.com/page/2"
  </code></pre>
  
  <p>But below the fb comment box, Facebook shows following error</p>
  
  <blockquote>
    <p>Warning: <a href="http://mydomain.com/page/%7B%7B%20page.id%7D%7D" rel="nofollow">http://mydomain.com/page/%7B%7B%20page.id%7D%7D</a> is
    unreachable.</p>
  </blockquote>
  
  <p>I can see the angularJS scope variable is not binding. Does anyone know how to solve this issue?</p>