JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html ng-app="HomePageModule">

  <head>
    <title>Facebook test</title>
    <script src="http://code.angularjs.org/1.0.0rc2/angular-1.0.0rc2.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
  </head>

  <body>
    <div id="fb-root"></div>

    <script type="text/javascript">
      window.fbAsyncInit = function() {
        FB.init({
          appId: '383186668368577'
        });
      };

      // Load the SDK Asynchronously
      (function(d) {
        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.js";
        ref.parentNode.insertBefore(js, ref);
      }(document));

    </script>
    <div ng-controller="ConnectCtrl">
      <h1>{{user.name}}</h1>
      <br/>
      <h1>{{error}}</h1>
      <button ng-click="registerWithFacebook()">Find myself on facebook</button>
    </div>
  </body>

</html>

JavaScript

angular.module('HomePageModule', []).factory('facebookConnect', function() {
  return new function() {
    this.askFacebookForAuthentication = function(fail, success) {
      FB.login(function(response) {
        if (response.authResponse) {
          FB.api('/me', success);
        } else {
          fail('User cancelled login or did not fully authorize.');
        }
      });
    }
  }
});

function ConnectCtrl(facebookConnect, $scope, $resource) {

  $scope.user = {}
  $scope.error = null;

  $scope.registerWithFacebook = function() {
    facebookConnect.askFacebookForAuthentication(
      function(reason) { // fail
        $scope.error = reason;
      },
      function(user) { // success
        $scope.user = user
        $scope.$digest() // Manual scope evaluation
      });
  }
}

ConnectCtrl.$inject = ['facebookConnect', '$scope', '$resource'];