I've managed to hook my Firebase up to Google Charts which works great, but I'm struggling in how to show a simple message saying 'no data' if there is no data that evaluates to a simple if else expression I've declared.

For example, I have a Firebase data value of 'NA' set up for a single user, which would in theory mean the chart will not show by default and the error message would show up on page load and at any point this changes back to this value. However, this is not the case and the only way to trigger it is by clicking the 3D button I've set up in the HTML file. Also, when the Firebase data changes to a value greater than zero, the error message still shows.

Here is my code:

**JS File**

```
var displayMode = true;

$scope.statistics = function () {
    $mdSidenav('left').close();
    $state.go('statistics');
    $timeout(function () {
        setUpChart();
        var timer;
        $(window).on('resize', function () {
            clearTimeout(timer);
            timer = setTimeout(function () {
                setUpChart();
            }, 250);
        });
    });
};

function setUpChart() {

    $.ajax({
        url: '//www.google.com/jsapi',
        dataType: 'script',
        cache: true,
        success: function () {
            google.load('visualization', '1', {
                'packages': ['corechart'],
                'callback': drawChart
            });
        }
    });

    function drawChart() {

        // This links to my Firebase url
        userRef.on('value', function (snapshot) {

            var pass = 0;
            var fail = 0;

            snapshot.forEach(function (snapshot) {
                var userResults = snapshot.val();
                if (userResults.passFail === 'Pass') {
                    pass = pass + 1;
                }
                if (userResults.passFail === 'Fail') {
                    fail = fail + 1;
                }
            });

            if (pass === 0 && fail === 0) {
                console.log('No data: ' + pass + ' & ' + fail);
                $scope.error = true;
                $scope.errorMessage = 'No user data available, please try  
                again later.';
            } else {
                console.log('Is data: ' + pass + ' & ' + fail);
                $scope.error = false;
                $scope.errorMessage = null;
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Result');
                data.addColumn('number', 'Delegates');
                data.addRows([
                    ['Pass', pass],
                    ['Fail', fail]
                ]);

                var options = {
                    'is3D': displayMode,
                    'chartArea': {'width': '100%', 'height': '80%'},
                    'legend': {'position': 'top', 'alignment': 'center'}
                };

                var chart = new 
         google.visualization.PieChart(document.getElementById('pieChart'));
                chart.draw(data, options);
            }

        });

    }

}

// Changes chart type to 3D or top view on a butto click
$scope.chartFormat = function () {
    if (displayMode == true)
        displayMode = false;
    else
        displayMode = true;
    setUpChart();
};

```

**HTML**

```
<div class="container" style="padding-top: 100px; padding-bottom: 50px">

<button data-ng-model="displayType" style="display: block; margin: 0 auto"
        data-ng-click="displayType=displayType ? false : true;  
        chartFormat()"
        class="btn btn-default btn-md" type="button"><i class="material-
        icons">3d_rotation</i></button>

<div data-ng-if="error" class="alert alert-danger">
   <span data-ng-if="errorMessage" class="glyphicon glyphicon-remove">  
   </span><strong> {{errorMessage}}</strong>
</div>

<div id="pieChart" style="display: block; margin: 0 
auto; width: 100%; height: 500px"></div>

</div>

```