JavaScript Angular infdig Error When Returning Object angularjs infdig error,infdig angular error,angular rootscope infdig error

I am new to Angular and have a situation where I must pass in an object into an attribute of an element inside an ng-repeat. The code works fine when returning the new object if I do not use ajax to get the data and just return a plain object, however, when I do I get an infdig error. My question is what would be the best way to do what I am doing in the code below and also resolve my infdig error. Thanks so much in advance.

HTML element inside ng-repeat:

<div ng-if="currentView.comparisons !== 'null'">
    <div ng-repeat="comparison in currentView.comparisons track by $index" class="row x-margintop">
     <div class="row x-margintop">
      <div class="col-md-8">
       <fusioncharts width="100%" height="400px" type="column2d" datasource="{{getComparisonChart(comparison)}}"></fusioncharts>
      </div>
    </div>
   </div>
</div>

JS:

 /*Ajax For Getting Comparisons Omitted For Brevity But Comparisons Will Have 
 The Following Properties*/
   var newCompObj = {name: comparison.name, template : comparison.template, dataSource: comparison.dataSource, date: {startDate: null, endDate: null}};
  $scope.currentView.comparisons.push(newCompObj);

$scope.getComparisonChart = function(chart){

//Callback and Other Chart Data Will Vary Based On The Chart Type

if(chart.dataSource === 'SvC'){
var data = [];
/* here I want to make a callback and return some data and have that data as part of the returned object.  I know this code is wrong, but not sure how to do this */
      $http({
  url:'callbacks/chart_data/dogCallback.jsp',
  method: 'GET',
  params: {startDate: chart.startDate, endDate: chart.endDate}
}).success(function(data){
    setData(data);  
});  

function setData(data){     
  return {
    "chart": {
      "caption": "Monthly revenue for last year",
      "subCaption": "Harry's SuperMart",
      "xAxisName": "Month",
      "yAxisName": "Revenues (In USD)",
      "numberPrefix": "$",
      "paletteColors": "#0075c2",
      "bgColor": "#ffffff",
      "borderAlpha": "20",
      "canvasBorderAlpha": "0",
      "usePlotGradientColor": "0",
      "plotBorderAlpha": "10",
      "placevaluesInside": "1",
      "rotatevalues": "1",
      "valueFontColor": "#ffffff",
      "showXAxisLine": "1",
      "xAxisLineColor": "#999999",
      "divlineColor": "#999999",
      "divLineDashed": "1",
      "showAlternateHGridColor": "0",
      "subcaptionFontBold": "0",
      "subcaptionFontSize": "14",
      "theme": "fint"
    },
    "data": data,
  }; 
}  
};

The problem is I could have many fusioncharts so I wouldn't have $scope.var for each one. The user can create any number of charts with that chart type and every chart of that type would need this same object, but will have different data. I'm open to any ideas as to how to resolve this. In summary, I have element that needs an object as its datasource. The type of chart defines the object and other attributes of the object I'm repeating with an ng-repeat define the parameters for the data that has to returned via a callback. I also tried the Ajax call inline inside the object with no success.

Please let me know if you need anymore info.