AngularJS widget and service for Facebook SDK

It's pretty annoying trying to integrate the Facebook SDK into an AngularJS app primarily because most of the Facebook functions are exposed through a global FB object, and AngularJS doesn't like naked global objects (preferring instead to perform app-wide functions via services).

In this gist, we wrap the instantiation of the Facebook SDK into our custom AngularJS directive, and also expose a $FB service that can be injected into other parts of the AngularJS app.

Usage of the custom directive is as follows

<!-- Where you would normally have <div id="fb-root"></div> -->
<fb app-id="1234567">

The additional service exposes $FB, with the standard Facebook SDK functions, so you can call it from within your other controllers/directives/services in an AngularJS fashion, eg.

angular.module('facestagram')

    .controller('UserController', [
        '$scope',
        '$FB',
        function($scope, $FB) {    
            $scope.checkLogin = function(callback) {
                $FB.getLoginStatus(callback);
            }
        }
    }