single page application can't get current page meta tag for facebook share

What jackypan1989 said is true, you will have to use the absolute url. But one other thing that I'm pretty sure happens is that Facebook won't run your JavaScript code, thus the part

<meta property="og:url" content="/post/{{data.permalink}}">

will never get replaced with

<meta property="og:url" content="/post/the-page-that-was-shared">

This problem that you are having could also prevent Google from crawling your page.

We had the same problem, and we used https://prerender.io to get around it. You can use it on your own server, or use one of their free/paid services.

You already have a body defined around your ng-view. Then your view has its own body. So you are trying to inject a body inside of a body which isn't going to do what you want.

Notice that your controller does not control the HTML element that contains the Meta tags. It only controls code that it contains (a div within the body in your case).

You can add a controller to the HTML tag or you can use $rootScope.

Lots of answers to this here: How to dynamically change header based on AngularJS partial view?

In your controller that handles the ng-view: app.controller('MainControl', function ($rootScope, $scope, Config) { ... $rootScope.canonical = Config.domain; });

I needed to dynamically set a canonical link, but the principal for metas is the same. In your header: <link rel="canonical" ng-href="{{ canonical }}" />

You'll probably want to use ng-bind for a meta tag.

I would add to the previous answers that prerender will solve crawling problems but facebook share is a bit different I think ( feel free to prove me wrong :) ). To avoid annoying {{}} you can define your own meta directive <meta meta-description> and use a template:

app.directive('metaDescription', [ 'metaData', function(metaData){
  return {
    restrict: 'A',
    replace: true,
    template: '<meta name="description" content="{{metaData.pageDesc}}">',
    link: function(scope,element){
      scope.metaData = metaData;


    }
  };
}]);

We are still figuring out SEO/sharing issues with angularJS here but that's what we currently use.