Creating multiple CanvasJS charts inside <div> with ng-repeat
<p>I am trying to create multiple CanvasJS charts inside a div.</p>

<p>The div expects array of data from controller, loops through it(using ng-repeat) and displays the data in various controls.</p>

<p>Now when I try to put a CanvasJS Chart inside this div, the chart does not render and the error I see is 'chart with id  is not found'</p>

<p>But the same chart works well just outside this div.</p>

<p>Sample code here:
<a href="http://jsfiddle.net/DTheWebDev/mozfsxpc/7/" rel="nofollow">http://jsfiddle.net/DTheWebDev/mozfsxpc/7/</a> </p>

<p>APP.JS</p>

<pre><code>var m = {
  "India": "2",
  "Australia": "3"
};

function MyCtrl($scope) {
  $scope.items = m;
}
var dps = [{
  x: 1,
  y: 10
}]; //dataPoints. 

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Live Data"
  },
  axisX: {
    title: "Axis X Title"
  },
  axisY: {
    title: "Units"
  },
  data: [{
    type: "line",
    dataPoints: dps
  }]
});

chart.render();
var xVal = dps.length - 1;
var yVal = 15;
var updateInterval = 1000;

var updateChart = function() {
  yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
  dps.push({
    x: xVal,
    y: yVal
  });
  xVal--;
  chart.render();

};
setInterval(function() {
  updateChart()
}, updateInterval);
</code></pre>

<p>HTML:</p>

<pre><code>&lt;h3&gt;Match Summary:&lt;/h3&gt;

&lt;div ng-app ng-controller="MyCtrl"&gt;
  &lt;div ng-repeat="(country,goals) in items"&gt;
    &lt;div id="chartContainer" style="height: 200px; width: 100%;"&gt;&lt;/div&gt;
    &lt;h2&gt;{{country}}: {{goals}} &lt;/h2&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Tried to search with similar problem, but no luck.</p>

<p>Thanks for your time and help in advance.</p>