Qiblah Direction - Using cordova device orientation - IONIC/AngularJS

Question

Developing Hybrid app using IONIC/Angularjs for Android/IPhone, Trying to implement Qiblah direction using Cordova device orientation, Below is the logic for the same

Using compass watch heading, getting the North direction and rotation angle using which calculating the Qiblah direction.

// TO FIND DEVICE ORIENTATION(DEGREES)
    $scope.qiblahRotation = {
        '-moz-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
        '-webkit-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
        '-o-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
        '-ms-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
        'transform': 'rotate(' + $scope.rotationAngle + 'deg)',
        '-webkit-transition': '30ms linear all',
        '-moz-transition': '30ms linear all',
        '-o-transition': '30ms linear all',
        '-ms-transition': '30ms linear all',
        'transition': '30ms linear all',
        '-webkit-transition': '0.1ms linear all',
        '-moz-transition': '0.1ms linear all',
        '-o-transition': '0.1ms linear all',
        '-ms-transition': '0.1ms linear all',
        'transition': '0.1ms linear all',
    };
    $scope.northRotation = {
        '-moz-transform': 'rotate(' + $scope.northDirection + 'deg)',
        '-webkit-transform': 'rotate(' + $scope.northDirection + 'deg)',
        '-o-transform': 'rotate(' + $scope.northDirection + 'deg)',
        '-ms-transform': 'rotate(' + $scope.northDirection + 'deg)',
        'transform': 'rotate(' + $scope.northDirection + 'deg)',
        '-webkit-transition': '30ms linear all',
        '-moz-transition': '30ms linear all',
        '-o-transition': '30ms linear all',
        '-ms-transition': '30ms linear all',
        'transition': '30ms linear all',
        '-webkit-transition': '0.1ms linear all',
        '-moz-transition': '0.1ms linear all',
        '-o-transition': '0.1ms linear all',
        '-ms-transition': '0.1ms linear all',
        'transition': '0.1ms linear all',
    };
    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {
        if(!$rootScope.qibla){
            navigator.geolocation.getCurrentPosition(ongSuccess, ongError);
        }
        // TO FIND PHONE'S Latitude AND Longitude

        function ongSuccess(position) {
            $rootScope.watchID = navigator.compass.watchHeading(onSuccess, onError, options);

            // TO CALCULATE QIBLAH DIRECTION

            $scope.phone_latitude = position.coords.latitude;
            $scope.phone_longitude = position.coords.longitude;
            $scope.$apply();

            var A = 21.4226514 * (Math.PI / 180.0);
            var B = 39.8269916 * (Math.PI / 180.0);
            var C = $scope.phone_latitude * (Math.PI / 180.0);
            var D = $scope.phone_longitude * (Math.PI / 180.0);

            var direction = 180.0 / Math.PI * Math.atan2(Math.sin(B - D), Math.cos(C) * Math.tan(A) - Math.sin(C) * Math.cos(B - D));

            $scope.qiblah = parseInt(direction);
            console.log("qiblah" + $scope.qiblah);
            $scope.$apply();

        };

        function ongError(error) {
            $rootScope.qibla = true;
            if(ionic.Platform.isIOS()){
                if(error.code == 1){
                    commonServices.showAlertMessage($scope.STRINGS.appName, $translate('ERROR_CODES.denAcc'));
                }
            } else {
                commonServices.showAlertMessage($scope.STRINGS.appName, "Error Code" + error.message);
            }
        };


        function onSuccess(heading) {
            $scope.northDirection = (360 - parseInt(heading.magneticHeading));
            $scope.rotationAngle = ($scope.northDirection) + ($scope.qiblah);
            console.log("heading-" + heading.magneticHeading);
            console.log("north-" + $scope.northDirection);
            console.log("rotationAngle" + $scope.rotationAngle);
            if ($scope.rotationAngle >= 0) {
                $scope.degree = $scope.rotationAngle + "°";
            } else {
                $scope.degree = (290 + 69) + $scope.rotationAngle + "°";
            }
            // $scope.degree=$scope.rotationAngle+"°";
            // console.log("rotationAngle"+$scope.rotationAngle);
            $scope.$apply();
            $scope.qiblahRotation = {
                '-moz-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
                '-webkit-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
                '-o-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
                '-ms-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
                'transform': 'rotate(' + $scope.rotationAngle + 'deg)',
                '-webkit-transition': '30ms linear all',
                '-moz-transition': '30ms linear all',
                '-o-transition': '30ms linear all',
                '-ms-transition': '30ms linear all',
                'transition': '30ms linear all',
                '-webkit-transition': '0.1ms linear all',
                '-moz-transition': '0.1ms linear all',
                '-o-transition': '0.1ms linear all',
                '-ms-transition': '0.1ms linear all',
                'transition': '0.1ms linear all',
            };
            $scope.northRotation = {
                '-moz-transform': 'rotate(' + $scope.northDirection + 'deg)',
                '-webkit-transform': 'rotate(' + $scope.northDirection + 'deg)',
                '-o-transform': 'rotate(' + $scope.northDirection + 'deg)',
                '-ms-transform': 'rotate(' + $scope.northDirection + 'deg)',
                'transform': 'rotate(' + $scope.northDirection + 'deg)',
                '-webkit-transition': '30ms linear all',
                '-moz-transition': '30ms linear all',
                '-o-transition': '30ms linear all',
                '-ms-transition': '30ms linear all',
                'transition': '30ms linear all',
                '-webkit-transition': '0.1ms linear all',
                '-moz-transition': '0.1ms linear all',
                '-o-transition': '0.1ms linear all',
                '-ms-transition': '0.1ms linear all',
                'transition': '0.1ms linear all',
            };

        }




        function onError(compassError) {
            commonServices.showAlertMessage($scope.STRINGS.appName, 'Compass error: ' + compassError.code);
        };


        var options = {
            frequency: 10
        };

After trying a lot still we are not able to bring exact direction using HTML5/Cordova. Please suggest if any plugin available for the same.