title: angularJS controllers functions callback
body: <p>I am wondering how callbacks works in angularJS.
  I have this code working perfectly like this </p>
  
  <pre><code>$scope.loginFB = function () {
    hello(FACEBOOK).login(function () {
      hello(FACEBOOK).api('me').then(function (profile) {
        console.log('successful api call');
        dbService.handle_credentials(profile);
        $rootScope.$apply(function () {
          $location.path('/homePage');
        });
      }, function(){
        console.error('something went wrong with authentification');
      });
    });
  };
  </code></pre>
  
  <p>but works in weird way when refactored like this </p>
  
  <pre><code>$scope.loginHandler =function () {
    hello(FACEBOOK).api('me').then(function (profile) {
      console.log('successful api call');
      dbService.handle_credentials(profile);
      $rootScope.$apply(function () {
        $location.path('/homePage');
      });
    }, function(){
      console.error('something went wrong with authentification');
    });
  };
  
  $scope.loginFB = function () {
    hello(FACEBOOK).login($scope.loginHandler());
  };
  </code></pre>
  
  <p>please tell me what i am doing wrong with this refactoring.</p>