title: single page application can't get current page meta tag for facebook share
body: <p>I'm trying to implement the facebook share button in my app, however I can't seem to get it to work on and idk why this is what I have so far.</p>
  
  <p><strong>html(/post/some-random-string)</strong></p>
  
  <pre><code>&lt;div id="fb-root"&gt;&lt;/div&gt;
  &lt;meta property="og:site_name" content="App"&gt;
  &lt;meta property="og:url" content="/post/{{data.permalink}}"&gt;
  &lt;meta property="og:title" content="{{data.title}}"&gt;
  &lt;meta property="og:type" content="blog"&gt;
  &lt;meta property="og:image" content="https://i1.ytimg.com/vi/tIWPnxEpNQg/maxresdefault.jpg"&gt; 
  &lt;meta property="og:description" content="{{data.preview}}"&gt;
  
  &lt;body &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/en_US/sdk.js#xfbml=1&amp;appId=580882498674160&amp;version=v2.0";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
     // this facebook share button doesn't appear.
     &lt;div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-type="button"&gt;&lt;/div&gt;
     //so i manually make one.
    &lt;a href="" ng-click='facebookShare();'&gt;Share&lt;/a&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p><strong>controller.js</strong></p>
  
  <pre><code>$scope.facebookShare= function(){
     return window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook_share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
   }
  </code></pre>
  
  <p>it works however it didn't read the meta tag i have written above on the html page instead it reads from my index page
  <img src="https://i.stack.imgur.com/YqBii.png" alt="enter image description here"></p>
  
  <p><strong>index page</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app='app'&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;noscript&gt;
    &lt;meta http-equiv="refresh" content="7"&gt;
      &lt;style type="text/css"&gt;
        .pagecontainer {display:none;} 
      &lt;/style&gt;
      &lt;div class="pure-u-1 text-center"&gt;
      &lt;title&gt;Symsal- Oh no ! We need Javascript to work !&lt;/title&gt;
      &lt;h3&gt; Please Enable javascript &lt;/h3&gt;
      &lt;/div&gt;
  &lt;/noscript&gt;
    &lt;head&gt;
    &lt;title ng-bind='title'&gt;&lt;/title&gt;
    // some css file 
    &lt;/head&gt;
  &lt;body&gt;
  &lt;div class='puretype'&gt;
  &lt;div ng-controller="MasterCtrl"&gt;
  &lt;div id="layout"&gt;
      &lt;!-- Menu toggle --&gt;
      &lt;a href="" id="menuLink" class=" white menu-link"&gt;
          &lt;span&gt;&lt;/span&gt;
      &lt;/a&gt;
  &lt;div id='menu' class="pure-u-1"&gt;
     &lt;div ng-bind-html="userView"&gt;&lt;/div&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="pure-g-r"&gt;
  &lt;div id="feed-container" class='pure-u-1 slide'ng-view=''&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  // some javascript files 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>facebook debugger</strong>
  <img src="https://i.stack.imgur.com/sD7YE.png" alt="enter image description here"></p>