Angular js Facebook Login

Question

I want to use Facebook Login on my project. When the Facebook button is clicked I call checkLoginState function bu I get an error. I put angular js script file and I used ng-app. How can I solve this problem?

The error code is

Uncaught ReferenceError: $scope is not defined

HTML Code

<div class="text-center">{{userName}}</div>
<fb:login-button  data-auto-logout-link="true" scope="public_profile,email" onlogin="$scope.checkLoginState();">Sign İn</fb:login-button>                               

Script Code

    window.fbAsyncInit = function() {
    FB.init({
        appId      : '391188****',
        cookie     : true,  // enable cookies to allow the server to access 
        xfbml      : true,  // parse social plugins on this page
        version    : 'v2.8' // use graph api version 2.5
    });

    FB.getLoginStatus(function(response) {
        $scope.statusChangeCallback(response);
    });
};                  

var app = angular.module('myapp', []);
app.controller('ctrl', ['$scope','$http',function($scope,$http){

    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_EN/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    $scope.checkLoginState=function() {
        FB.getLoginStatus(function(response) {
            $scope.statusChangeCallback(response);
        });
    }               
    $scope.statusChangeCallback=function(response) {
        if(accessToken){
            var accessToken=response.authResponse.accessToken;
        }               
        if (response.status === 'connected') {
            $scope.send(accessToken);   
        } else if (response.status === 'not_authorized') { 
            document.getElementById('status').innerHTML = '';
        } else{
            document.getElementById('status').innerHTML = '';
        }
    }
    $scope.send = function(accessToken){
        $http({
            method  : 'POST',
            url  : 'https://example.com',
            data:{
                'smType':type,
                'smID':accessToken
            },
            headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
        }).success(function(data) {
            if (data.errors) {
                console.log("An error occurred");
            } else {
                    $scope.userName=data.name;
            }
        });
    };                      
}]);        

Answer 1

First of all, if you want to call checkLoginState from your html, it has to be inside your controller and attached to $scope:

$scope.checkLoginState=function(){...}

Second of all, you can't use $scope in statusChangeCallback without passing it in. So either put statusChangeCallback inside your controller or pass in $scope as an argument.

Third of all, make sure you are injected $scope into your controller. app.controller('ctrl',['$scope','$http',function($scope,$http){...}])