Open graph facebook and AngularJs

I am trying to add open graphics to an AngularJs app I am developing. I want my app user to share the url with their Facebook friends. I understand that for sharing, you need to add public metadata tags to the page (url, description, image, title, etc.). The url that I need my users to share is dynamic and has the following structure:

http://example.com/game/invitation/1118

Where 1118 is the game ID. The article below describes how to enable social sharing in an Angular app:

http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app

However, this article points out that Facebook crawlers cannot render dynamic content. So when Facebook crawlers access http://example.com/game/invitation/1118 , I need to redirect the request to my server in order to generate the correct open graph meta tags. I am using IIS (the article explains how to do this via Apache). Here's my rewrite rule:

    <rule name="Imported Rule 1" stopProcessing="true">
        <match url="invitation/([_0-9a-z-]+)" ignoreCase="false" />
        <conditions>
            <add input="{HTTP_USER_AGENT}" pattern="facebookexternalhit/[0-9]|Twitterbot|Pinterest|Google.*snippet" />
        </conditions>
        <action type="Redirect" url="http://meta.example.com/social/meta/{R:1}" appendQueryString="false" />
    </rule>

      

        
        
        
      

    

So, whenever the url contains a prompt / [game id] and the user agent is Facebook (or Twitter, Pinterest, Google, etc.), redirect them to " http://meta.example.com/social/ meta / [id] ". This works great. I set up a separate website ( http://meta.example.com ) to display open graph meta tags for indexed crawlers.

The problem is that I need to use http://example.com/game/invitation/1118 as the og: url meta tag value (this is the link that friends users click on to view the invitation most of my user friends will not be Facebook crawlers ). If I include

<meta property="og:url" content="http://example.com/game/invitation/1118" />

      

        
        
        
      

    

on the page generated at http://meta.example.com/social/meta/1118 , I am getting circular test errors on the Facebook Open Graph Object Debugger. The Facebook crawler chooses a title, description, etc. From the meta tags created at http://meta.example.com/social/meta/1118 . However, it seems that you are picking http://example.com/game/invitation/1118 from the og: url meta tag and running it again. This brings up a circular reference from what I can tell.

So, how do you configure IIS to redirect the request http://example.com/game/invitation/1118 to http://meta.example.com/social/meta/1118 when the user agent is Facebook, to create the appropriate meta tags for open graphics and reuse the original URL that started the process ( http://example.com/game/invitation/1118 )?

The article above ( http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app ) mentions how to do this for Apache. I don't know how to translate this to IIS:

The [P] flag forces Apache to perform the redirection using mod_proxy and mod_proxy_http, rather than regular redirection. If the 301 redirect used by Facebook, for example, links to the URL "static-page.php" and not the original URL.

Thank you for your help. I am using IIS 8.