Calling function synchronizely in angularjs

Question

I'm using pivot grid to show data from database ,So I get data by ajax ,the problem in synchronization ,pivot grid loaded before getting the data from database

How can I retrieve data before execute pivot grid?

function getData() to retrieve data from database

   function getData{
    ScoreService.getAverageScore($stateParams.id).then(function(output){
         $scope.jsonData=output; 
    });
    }

pivot grid code

     $scope.pivotData = new $.ig.OlapFlatDataSource({
        dataSource:$scope.jsonData,
        metadata: {
            cube: {
                name: "Sales",
                caption: "Route Scores",
                measuresDimension: {
                    caption: "Measures",
                    measures: [ //for each measure, name and aggregator are required
                        {
                            caption: "Score Value", name: "Value",
                            // returns a function that will be used as sum aggregator on the 'UnitsSold property' of the data objects
                            aggregator: $.ig.OlapUtilities.prototype.sumAggregator('Value')
                        }]
                },
                dimensions: [ // for each dimension name and hierarchies are required
                    {
                        caption: "Rules", name: "ScoreCategory", hierarchies: [{
                            caption: "Score Category", name: "ScoreCategory", levels: [
                                {
                                    name: "AllCategories", caption: "All Categories",
                                    memberProvider: function (item) { return "All Categories"; }
                                },
                                {
                                    name: "CategoryName", caption: "Category",
                                    memberProvider: function (item) { return item.ScoreCategoryName; }
                                }]
                        }]
                    },
                    {
                     caption: "Scenarios", name: "Scenario", hierarchies: [{
                            caption: "Scenario Category", name: "Scenario", levels: [
                                {
                                    name: "AllScenarios", caption: "All Scenarios",
                                    memberProvider: function (item) { return "All Scenarios"; }
                                },
                                {
                                    name: "ScenarioName", caption: "Scenario",
                                    memberProvider: function (item) { return item.ScenarioName; }
                                }]
                        }]
                    }
                ]
            }
        },
        // Preload hierarchies for the rows, columns, filters and measures
        rows: "[Scenario].[Scenario]",
        columns: "[ScoreCategory].[ScoreCategory]",
        measures: "[Measures].[Value]"
    });
    });

Answer 1

You could synchronize on the result of the AJAX call to instantiate your grid:

$scope.$watch(function() {return $scope.jsonData}, function(oldV, newV) {
    if ((newV) && (newV != oldV)) {
        $scope.pivotData = new $.ig.OlapFlatDataSource({
        dataSource:$scope.jsonData,

        // your function
        ...
    }
}