How to dynamically set Zingchart attribute in Angular ng-Repeat

Question

Using AngularJS, I am trying to create a page that has a separate dynamically generated Zingchart for each object in the array. My problem is that since data and variable names are dynamically generated in my controller when the page loads, I am not sure how to refer to them correctly in Zingchart directives.

In my controller, here's how variables are dynamically generated:

function getWeeklyNflLines(){
  oddsService.getWeeklyNflLines($stateParams.weekNumb).then(function(games){
    vm.nflLines = games;
    for (i=0; i<vm.nflLines.length; i++){
      $scope[vm.nflLines[i].AwayAbbrev] = { [Zingchart json configuration goes here] }
    }
  }
}

Then, in my opinion, where I am trying to create Zingchart, I have:

<div ng-repeat="game in vm.nflLines>
  <div zingchart zc-json="{{game.AwayAbbrev}}" zc-width="100%" zc-height="350px"></div>
</div>

So, to consider: I set the scope variable AwayAbbrev $ in the controller, which should match "game.AwayAbbrev" inside my ng-repeat, but when I try to do this, I get the following error in my browser:

angular.js:13550 Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{game.AwayAbbrev}}] starting at [{game.AwayAbbrev}}].

zc-json ng-attr-zc-json, , .

, ? !

====

EDIT: , (, zc-json = "game.AwayAbbrev" ), , .

===

№ 2: . , . , , ; id Zingchart, ng-repeat . , :

<div zingchart id="pick-chart[{{$index}}]" zc-json="nflLines[game.AwayAbbrev]" zc-width="100%" zc-height="350px"></div>

Answer 1

json $scope :

$scope.nfLines = {};

function getWeeklyNflLines(){
  oddsService.getWeeklyNflLines($stateParams.weekNumb).then(function(games){
    vm.nflLines = games;
    for (i=0; i<vm.nflLines.length; i++){
      $scope.nfLines[vm.nflLines[i].AwayAbbrev] = { [Zingchart json configuration goes here] }
    }
  }
}

HTML :

<div ng-repeat="game in vm.nflLines>
  <div zingchart zc-json="nfLines[game.AwayAbbrev]" zc-width="100%" zc-height="350px"></div>
</div>

Answer 2

,

<div ng-repeat="game in vm.nflLines>
  <div zingchart zc-json="game.AwayAbbrev" zc-width="100%" zc-height="350px"></div>
</div>