How to Pass the Angular Variable to Another Angular Google Chart Function(Angular Directive)

Question

Can someone help me in approach for passing Angular Variable to Google Chart Function which is present in the same Java Script with Angular Directive

And Also I wanted to load Google Charts to load only after passing the values.I just read some question they mentioned something like Promises How can i use here.

Java Script

In Below Code I wanted to pass Angular Variables openCount,closedCount to Google Chart Function like with Angular JS

Demo For Google Chart with Angular JS

In the above Demo I am hard coding the values

"rows": [
        {c: [
            {v: "Defect Opened"},
            {v:1}
        ]},

        {c: [
            {v: "Defects Closed"},
            {v: 2}

        ]

Now instead of hard coding values I wanted to pass the values from below controller. How can I achieve this[What modification required for this]

var app = angular.module('defectApp', ["ngTable"]);
app.controller('defectController', [
    '$scope',
    '$http',
    function($scope, $http) {
        $http({method: 'POST', url: '/angular/defect/defect.php'}).success(function(response) {
            $scope.post = response;

            console.log(response);

            var openCount = $filter('filter')(response.data, {status: 'Open'}).length,
            closedCount = $filter('filter')(response.data, {status: 'Closed'}).length,
            assignedCount = $filter('filter')(response.data, {status: 'Assigned'}).length;

            console.log(openCount);
        })
    },
]);

Answer 1

One option would be to introduce a service and move the method for getting data from defectController into service:

.service('defectService', function ($http, $filter) {
    return {
        getInfo: function () {
            return $http({ method: 'POST', url: '/angular/defect/defect.php' })
                .then(function (response) {
                    return {
                        "openCount": $filter('filter')(response.data, { status: "Open" }).length,
                        "closedCount": $filter('filter')(response.data, { status: 'Closed' }).length,
                        "assignedCount": $filter('filter')(response.data, { status: 'Assigned' }).length
                    }
                });
        }
    };
})

Then inject defectService service info chart contoller. Modify chart controller to draw a chart once the data is retrieved:

.controller("chartCtrl", function ($scope, defectService) {

    defectService.getInfo()
        .then(function (info) {
            console.log(info);
            $scope.drawChart(info);
        });


    $scope.drawChart = function (info) {
        //code is omitted for clarity..
    };


});

Demo