javascript - updating variable when passed into visualizejs method angularjs

Question

So what I want to do is show my loading directive when I clicked the generate button and hide the loading directive when the report is completed. Since visualize.js has a "reportCompleted" event I updated my fetching variable their as false to hide the loading directive.

<button class="btn btn-default" data-ng-click="vm.generateReport(filter)">Generate</button>

<div class="text-center info-message" data-ng-show="vm.fetching">
    <loading message="Fetching report..."></loading message>
    <span>{{vm.fetching}}</span>
</div>

Here is what's inside my controller:

var self = this;
// this is declared on top as default variable
self.fetching = false;

this is the method that is called to show the loading directive and the report

function generateReport ( filterData ) {
    // show loading directive
    self.fetching = true;

    v( '#report' ).report( {
        'resource'  : '/public/Samples/Reports/01._Geographic_Results_by_Segment_Report',
        'container' : '#report',
        'error'     : handleError,
        'events': {
            'reportCompleted' : function( status ) {
                self.fetching = true;

                if( status === 'ready' ) {
                    // hide loading directive
                    self.fetching       = false;
                    self.reportRendered = true;
                }
            }
        }
    } );
  } );
}

What my problem is that even if I have updated my fetching variable in the event listener 'reportCompleted' it still does not hide my loading directive. I tried console.log( self.fetching ) outside the visualize method and it returns as true instead that it should be returning false. Why is this happening?

Answer 1

visualizejs is a external library and not integrated into the angular lifecycle. you need to call $scope.$apply(function) or $scope.$digest() to notify angular the model has changed and it should update the GUI

your reporter should run in a controller or a directive which gives you access to the $scope:

 v( '#report' ).report( {
        'resource'  : '/public/Samples/Reports/01._Geographic_Results_by_Segment_Report',
        'container' : '#report',
        'error'     : handleError,
        'events': {
            'reportCompleted' : function( status ) {
                self.fetching = true;

                if( status === 'ready' ) {
                    // hide loading directive
                    self.fetching       = false;
                    self.reportRendered = true;
                }

                $scope.$digest();
            }
        }
    } );