Why is AngularJS + fb-like giving me "Refused to display document because display forbidden by X-Frame-Options." intermittently?

I have this in my HTML

<div class="container" ng-controller="MyControl">
   ....(some html removed)....
   <fb-like data-href="...." data-send="false" data-layout="button_count" data-width="120" data-show-faces="false" data-font="verdana"></fb-like>

In my JS, I did not place the Facebook async init inside of MyControl, but in some other control. And have loaded Facebook script when the document is ready.

function SomeOtherControl($scope,$rootScope) {
    ...(some code removed)....
window.fbAsyncInit = function() {
  // init the FB JS SDK
  FB.init({
    appId      : '...', // App ID from the App Dashboard
    channelUrl : '...', // Channel File for x-domain communication
    status     : false, // check the login status upon init?
    cookie     : true, // set sessions cookies to allow your server to access the session?
    xfbml      : true  // parse XFBML tags on this page?
  });
  FbLogin($scope,true);
  $rootScope.lastFbLogin = new Date();
  $rootScope.$apply('lastFbLogin')
};
angular.element(document).ready(function(){
    (function(d, debug){
       var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
       if (d.getElementById(id)) {return;}
       js = d.createElement('script'); js.id = id; js.async = true;
       js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
       ref.parentNode.insertBefore(js, ref);
    }(document, /*debug*/ false));
})

the lastFbLogin for now is empty

$rootScope.$watch('lastFbLogin',function(newVal,oldVal){
    if (!!newVal) {
    }
});

I think this has nothing to do with Angular. The 'forbidden by X-Frame Options' error suggests that the fb-like (or some other tag) is replaced with an iframe by the Facebook SDK, and the iframe contains a website that isn't meant to be rendered in an iframe. See this similar problem with solution.