Accelerometer does not work in Firefox (works in Chrome)

Question

This is my HTML:

<div class="sl-slide bg9" id="slide9">
    <div class="bg9-content">
        <header>
            <h1></span>Accelerometer</h1> 
            <p>Move your laptop to guide the circle into it place</p>   
            <div class="how-it-works" ng-click="go('/learn/getting-started-with-html5/accelerometer-how-it-works')">See how it works</div> 
        </header>
        <div class="accelerometer-game">
            <div class="accelerometer-game-board rotated-square-large">
                <div class="accelerometer-game-ball" id="game-ball"></div>
                <div class="accelerometer-game-goal"></div>
            </div>
        </div>
    </div>
</div>

This is my JavaScript:

HTML5GuideApp.controller('accelerometerCtrl', function($scope){
    console.log('Angular accelerometer controller being called');

    // Accelerometer
    function deviceOrientationHandler(tiltLR, tiltFB, dir){
        console.log('device orientation handler fx being called!');

        var ball = document.getElementById('game-ball');

        // move the game ball
        ball.style.webkitTransform = "translate("+ tiltLR +"px, "+ (tiltFB*2) + "px)";
        ball.style.MozTransform = "translate("+ tiltLR +"px, "+ (tiltFB*2) + "px)";
        ball.style.transform = "translate("+ tiltLR +"px, "+ (tiltFB*2) + "px)"; 
    }

    // test for support
    if(window.DeviceOrientationEvent){
        console.log('Device Orientation if statement being called from controller!');

        // listen for the deviceOrientation event and handle the raw data
        // FIREFOX PROBLEM IS HERE. addEventListener is not being called :(
        window.addEventListener('deviceorientation', function(eventData){
            // gamma is the left-to-right tilt in degrees, where right is positive
            var tiltLR = eventData.gamma;

            // beta is the front-to-back title in degrees, where front is positive
            var tiltFB = eventData.beta;

            // alpha is the compass direction the device is facing in degrees
            var dir = eventData.alpha;

            // call our orientation event handler
            deviceOrientationHandler(tiltLR, tiltFB, dir);

            // victory condition
            if(tiltFB > 40 && (tiltLR >= -5 && tiltLR <= 5)){
                console.log('VICTORY CONDITION TEXT');
                $('header p').text('You win!').css('text-indent', '-52px');
            }
        }, false);
    } else {
        $('header p').html("Sorry, you can't play the game! <br>Device orientation is not supported on your browser.");
    }    
});

I am accessing the accelerometer from an Angular controller. I am using Firefox 26, which supports device orientation events .

When I look at the log in the Firefox Browser Console, I see the following console.logs():

• "Angular accelerometer controller called"
• "Orientation of the device if the operator is called from the controller"

I DO NOT see console.log('device orientation handler fx being called!');, and I do not know why this fx is not being called.

Note: The following JavaScript works in the Chrome DevTools console, but returns nullwhen entered into the Firefox Console:

document.getElementById('game-ball');