title: Issue while loading facebook-sdk for angularjs
body: <p>I am trying to integrating facebook login with my web app but its giving below error, somehow. </p>
  
  <pre><code>Uncaught Error: Provider Facebook must define $get factory method. from facebook
  </code></pre>
  
  <p>Although I have added angular-facebook.js file which has the $get method but still there is a miss.</p>
  
  <p>My index.html is:</p>
  
  <pre><code>            &lt;!doctype html&gt;
              &lt;html lang="en" ng-app="AngularSpringApp"&gt;
              &lt;head&gt;
                  &lt;meta charset="utf-8"&gt;
                  &lt;title&gt;Service App&lt;/title&gt;
                  &lt;link rel="stylesheet" href="/resources/css/app.css"/&gt;
                  &lt;link rel="stylesheet" href="/resources/bootstrap/css/bootstrap.min.css" /&gt;
              &lt;/head&gt;
              &lt;body&gt;
              &lt;div id="wrapper"&gt;
  
                  &lt;ul class="menu"&gt;
                      &lt;li&gt;&lt;a href="#/cars"&gt;Cars&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#/trains"&gt;Trains&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#/railwaystations"&gt;Railway Station&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;hr class="" /&gt;
                  &lt;div ng-view&gt;&lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;script src="/resources/js/lib/angular/angular.js"&gt;&lt;/script&gt;
              &lt;script src="/resources/js/angular-facebook.js"&gt;&lt;/script&gt;
              &lt;!--&lt;script data-require="angular.js@1.1.5" data-semver="1.1.5" src="//rawgithub.com/Ciul/angular-facebook/master/lib/angular-facebook.js"&gt;&lt;/script&gt;--&gt;
              &lt;script src="/resources/js/app.js"&gt;&lt;/script&gt;
              &lt;script src="/resources/js/services.js"&gt;&lt;/script&gt;
              &lt;script src="/resources/js/controllers/RailwayStationController.js"&gt;&lt;/script&gt;
              &lt;script src="/resources/js/controllers/CarController.js"&gt;&lt;/script&gt;
              &lt;script src="/resources/js/controllers/TrainController.js"&gt;&lt;/script&gt;
              &lt;script src="/resources/js/filters.js"&gt;&lt;/script&gt;
              &lt;script src="/resources/js/directives.js"&gt;&lt;/script&gt;
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>
  
  <p>My partial file which contains the facebook login/logout is:</p>
  
  <pre><code>            &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-8 col-lg-offset-2"&gt;
  
                          &lt;div class="page-header"&gt;
                              &lt;h1&gt;Hello ngFacebook!
                                  &lt;small&gt;&lt;a href="http://www.facebook.com/luiscarlosjayk" target="_blank"&gt;by Ciul&lt;/a&gt;&lt;/small&gt;
                              &lt;/h1&gt;
                          &lt;/div&gt;
  
                          &lt;div&gt;
                              &lt;div class="alert alert-info" data-ng-show="salutation"&gt;Hello, {{user.name}}&lt;/div&gt;
                              &lt;div class="alert alert-warning" data-ng-show="byebye"&gt;Bye bye :'(&lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;button type="button" class="btn btn-primary btn-large" data-ng-show="!logged"
                                  data-ng-disabled="!facebookReady" data-ng-click="IntentLogin()"&gt;Login with Facebook
                          &lt;/button&gt;
                          &lt;button type="button" class="btn btn-danger btn-large" data-ng-show="logged"
                                  data-ng-disabled="!facebookReady" data-ng-click="logout()"&gt;Logout
                          &lt;/button&gt;
  
                          &lt;div&gt;
                              &lt;debug val="user"&gt;&lt;/debug&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>app.js is:</p>
  
  <pre><code>            'use strict';
  
              var AngularSpringApp = {};
  
              var App = angular.module('AngularSpringApp', ['facebook', 'AngularSpringApp.filters', 'AngularSpringApp.services', 'AngularSpringApp.directives']);
  
              // Declare app level module which depends on filters, and services
              App.config(['$routeProvider', '$FacebookProvider', function ($routeProvider, $FacebookProvider) {
  
                  var myAppId = '239661002870669';
  
                  // You can set appId with setApp method
                  // FacebookProvider.setAppId('myAppId');
  
                  /**
                   * After setting appId you need to initialize the module.
                   * You can pass the appId on the init method as a shortcut too.
                   */
                  $FacebookProvider.init(myAppId);
  
                  $routeProvider.when('/cars', {
                      templateUrl: 'cars/layout',
                      controller: CarController
                  });
  
                  $routeProvider.when('/trains', {
                      templateUrl: 'trains/layout',
                      controller: TrainController
                  });
  
                  $routeProvider.when('/railwaystations', {
                      templateUrl: 'railwaystations/layout',
                      controller: RailwayStationController
                  });
  
                  $routeProvider.otherwise({redirectTo: '/cars'});
              }]);
  </code></pre>
  
  <p>Controller.js :</p>
  
  <pre><code>            'use strict';
  
              /**
               * CarController
               * @constructor
               */
              var CarController = function($scope, $http, $timeout, Facebook) {
  
                  // Define user empty data :/
                  $scope.user = {};
  
                  // Defining user logged status
                  $scope.logged = false;
  
                  // And some fancy flags to display messages upon user status change
                  $scope.byebye = false;
                  $scope.salutation = false;
  
                  /**
                   * Watch for Facebook to be ready.
                   * There's also the event that could be used
                   */
                  $scope.$watch(
                      function() {
                          return Facebook.isReady();
                      },
                      function(newVal) {
                          if (newVal)
                              $scope.facebookReady = true;
                      }
                  );
  
                  /**
                   * IntentLogin
                   */
                  $scope.IntentLogin = function() {
                      Facebook.getLoginStatus(function(response) {
                          if (response.status == 'connected') {
                              $scope.logged = true;
                              $scope.me();
                          }
                          else
                              $scope.login();
                      });
                  };
  
                  /**
                   * Login
                   */
                  $scope.login = function() {
                      Facebook.login(function(response) {
                          if (response.status == 'connected') {
                              $scope.logged = true;
                              $scope.me();
                          }
  
                      });
                  };
  
                  /**
                   * me
                   */
                  $scope.me = function() {
                      Facebook.api('/me', function(response) {
                          /**
                           * Using $scope.$apply since this happens outside angular framework.
                           */
                          $scope.$apply(function() {
                              $scope.user = response;
                          });
  
                      });
                  };
  
                  /**
                   * Logout
                   */
                  $scope.logout = function() {
                      Facebook.logout(function() {
                          $scope.$apply(function() {
                              $scope.user   = {};
                              $scope.logged = false;
                          });
                      });
                  }
  
                  /**
                   * Taking approach of Events :D
                   */
                  $scope.$on('Facebook:statusChange', function(ev, data) {
                      console.log('Status: ', data);
                      if (data.status == 'connected') {
                          $scope.$apply(function() {
                              $scope.salutation = true;
                              $scope.byebye     = false;
                          });
                      } else {
                          $scope.$apply(function() {
                              $scope.salutation = false;
                              $scope.byebye     = true;
  
                              // Dismiss byebye message after two seconds
                              $timeout(function() {
                                  $scope.byebye = false;
                              }, 2000)
                          });
                      }
  
  
                  });
  
                  $scope.fetchCarsList = function() {
                      $http.get('cars/carlist.json').success(function(carList){
                          $scope.cars = carList;
                      });
                  };
  
                  $scope.addNewCar = function(newCar) {
                      $http.post('cars/addCar/' + newCar).success(function() {
                          $scope.fetchCarsList();
                      });
                      $scope.carName = '';
                  };
  
                  $scope.removeCar = function(car) {
                      $http.delete('cars/removeCar/' + car).success(function() {
                          $scope.fetchCarsList();
                      });
                  };
  
                  $scope.removeAllCars = function() {
                      $http.delete('cars/removeAllCars').success(function() {
                          $scope.fetchCarsList();
                      });
  
                  };
  
                  $scope.fetchCarsList();
              };
  </code></pre>
  
  <p>Please let me know where is the error which I am missing, I am new to Angularjs and it has already consumed more than half of the day. thanks!</p>