Batman Batman - 6 months ago 29
AngularJS Question

Passing Data from AngularJS Service to AngularJS Controller

Can someone help me with below problem, Here I wanted to pass the data from



In the
Line Controller
, currently, I have hard coded the values as

data: [65, 59]

But I wanted to pass these values from the getJiraInfo Service to data field dynamically as
data : [toDoCount,inProgressCount]

Can you please help me with this by referring Plunker?

Answer Source

As you know $http returns original Promise. In your example you resolved it in service and did nothing with results. Since we talk about async call, you can create new Promise by using $q and resolve it on controller side. The main point is to return deferred.promise; - object that contains resolve and reject callbacks.

Your service looks like factory a.e.:

return {
    getInfo: function() {/**/}

Change it to service syntax a.e:

 this.getInfo = function() {/**/};

or use factory a.e.

app.factory('getJiraInfo', function($http, $filter,$q) {/**/};

You already defined chart options so left only update the data:

getJiraInfo.getInfo().then(function(results) {
     $ = results;


Full code:

var app = angular.module('myApp', ['tc.chartjs']);

app.service('JiraInfo', ['$http', '$filter','$q',function($http, $filter,$q) {

    this.getInfo = function() {

      var deferred = $q.defer();

        method: 'GET',
        url: 'defect.json'

      }).then(function(response) {
        selectedCount = $filter('filter')(, function(
          inputs) {
          if ( == 'To Do') return inputs;

        inProgressCount = $filter('filter')(, function(
          inputs) {
          if ( == 'IN PROGRESS') return inputs;
     // console.log(inProgressCount.length,selectedCount.length);

        var data = {


      }, function (error) {

       return deferred.promise;

app.controller('LineController', function($scope, JiraInfo) {

  $scope.chartData = {
    labels: ["In Progress", "To Do"],
    datasets: [{
      label: "Weekly Report",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "rgba(75,192,192,1)",

      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [0,0],
      spanGaps: false,

  $scope.chartOptions = {
    responsive: true,
    maintainAspectRatio: false,


  function run(){
    JiraInfo.getInfo().then(function(resp) {
     $scope.chartData.datasets[0].data = resp.val;

  $scope.onChartClick = function(event) {
    console.log('LineController', 'onChartClick', event);

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download