phonegap-facebook-plugin on WebApp, JS error

I am building a Ionic based mobile application and I am using the phonegap-facebook-plugin to login with facebook. I have managed to install the plugin on both android and ios and it works. However, while trying to use it for the webapp, I am having dificulties making it work. I will outline my setup then outline the error:

login.html

<div id="fb-root"></div>
<div class="event listening button" ng-click="login();">Login with Facebook</div>

app.js

angular.module('app', ['ionic', 'app.controllers', 'app.services'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

    //First page
    .state('login', {
      url: '/login',
      templateUrl: 'templates/login.html',
      controller: 'LoginCtrl'
    });

controllers.js

angular.module('app.controllers', [])

.controller('LoginCtrl', function($scope){

    $scope.login = function () {
        if (!window.cordova) {
            var appId = prompt("Enter FB Application ID", "");
            facebookConnectPlugin.browserInit(appId);
        }
        facebookConnectPlugin.login( ["email"], 
            function (res) {                                                
                //if successfull                                            
                if (JSON.stringify(response['authResponse']['accessToken']) != null){
                    alert("True");
                    $location.path('/home').replace();
                }
                else{
                    //redirect back
                }

            },
            function (res) { 
                //if error
                alert(JSON.stringify(response)) 
            }
        );
    }
});

In the facebookConnectPlugin.js, I have a line of code which gets the error "Uncaught TypeError: Cannot read property 'appendChild' of null", specifically Line 174:

document.getElementById('fb-root').appendChild(e);

I know this must be due to the DOM, but can't seem to get past it.

Any help would be great, thanks :)