JSFiddle - React, Tailwind, and code Playground

HTML

<div data-ng-app="app">
    <div data-ng-controller="BaseCtrl">
        {{ msg }}
    </div>
</div>

JavaScript

function BaseCtrl($scope, FacebookService) {
    $scope.msg = '';
    FacebookService.promise.then(function () {
        $scope.msg = window.FB;
    });
}


angular.module('facebookService', []).factory('FacebookService', ['$q', '$rootScope', function ($q, $rootScope) {
    function init() {
        $rootScope.$apply(function () {
            defer.resolve();
        });
    }
    var defer = $q.defer();
    defer.promise.then(function () {
        // FB.Init...
        window.FB = 'Facebook SDK loaded'; // Remove this line
    });
    window.fbAsyncInit = angular.bind(this, init);
    
    return defer;
}]);

angular.module('app', ['facebookService']);
// Simulate FB lazy loading
setTimeout(function () {
    window.fbAsyncInit();
}, 100);