Displaying data from socket io using angularJs

Question

I'm trying to get data from socket io and display the data on a graph using angularJs. I'm getting the correct data from the server but when I'm trying to display it I'm getting:"No Data To Display". I tried to debug my controller and i saw that I'm getting data but some how angular on my HTML doesn't show it. i also tried using Async.js but it still doesn't work.

my controller code:

$scope.graph2,data2 = [];
            socketFactory.emit('getTemplateStatistics', null);
            socketFactory.on('sendTemplateStatistics', function(result) {
                for (var i=0; i < result.length; i++) {
                    var temp = {label: result[i]._id, value: ""+result[i].total};
                    data2.push(temp);
                }
                    $scope.graph2 = {
                    chart: {
                        caption: "Age profile of website visitors",
                        subcaption: "Last Year",
                        startingangle: "120",
                        showlabels: "0",
                        showlegend: "1",
                        enablemultislicing: "0",
                        slicingdistance: "15",
                        showpercentvalues: "1",
                        showpercentintooltip: "0",
                        plottooltext: "Age group : $label Total visit : $datavalue",
                        theme: "fint"
                    },
                data2
                };
});

my HTML code:

<div class="statistics view indent">
    <div class="container" style="margin-top:10px">
        <header>
            <h3>Statistics Preview Displayer</h3>
        </header>
        <div>
            <fusioncharts 
                width="600" 
                height="400"
                type="pie3d"
                datasource="{{ graph2 }}"
            ></fusioncharts>
        </div>
        <a href="#/preferences" class="btn btn-primary" style="float: right;">Go back</a>
    </div>
</div>

Answer 1

I dont think this is a socket issue. Probably '$scope.graph2' is getting assigned before the for loop completes execution and so 'data2' has no value. Try changing the code like this

$scope.graph2,data2 = [];
socketFactory.emit('getTemplateStatistics', null);
socketFactory.on('sendTemplateStatistics', function(result) {
    for (var i=0; i < result.length; i++) {
        var temp = {label: result[i]._id, value: ""+result[i].total};
        data2.push(temp);
        if(i == result.length - 1) {               // To ensure $scope.graph2 is assigned only after for loop completes and data has all values
            $scope.graph2 = {
                chart: {
                    caption: "Age profile of website visitors",
                    subcaption: "Last Year",
                    startingangle: "120",
                    showlabels: "0",
                    showlegend: "1",
                    enablemultislicing: "0",
                    slicingdistance: "15",
                    showpercentvalues: "1",
                    showpercentintooltip: "0",
                    plottooltext: "Age group : $label Total visit : $datavalue",
                    theme: "fint"
                },
                data2
            };
        }
    }
});

This way $scope.graph2 gets assigned only after completion of for loop and so data2 wont be null