title: Dynamic creation og Highcharts in Angularjs
body: <p>I want to dynamically create charts in Angularjs with Highcharts. The Problem is, that Highcharts doesn't find the div to render it, although the have already been created.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ng-controller="MyCtrl"&gt;
      &lt;button class="btn btn-default" ng-click="test()"&gt;Test&lt;/button&gt;
      &lt;div id="test"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>function MyCtrl($scope) {
    var names = ["ab", "cd", "de"];
    _.each(names, function(name) {
      $("#test").append("&lt;div id='" + name + "'&gt;");
    });
    $scope.test = function() {
      _.each(names, function(name) {
        var chart = {
          chart: {
            type: 'line',
            zoomType: 'x',
            spacingRight: 20,
            renderTo: "#" + name
          },
          title: {
            text: "name"
          },
          xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
              month: '%e. %b',
              year: '%b'
            }
          },
          series: [{
            name: "test1",
            data: [
              [1, 2],
              [2, 3],
              [3, 3],
              [4, 2]
            ]
          }]
        }
        var chartObj = new Highcharts.Chart(chart);
      });
    }
  }
  </code></pre>
  
  <p>Here is my fiddle: <a href="http://jsfiddle.net/Phosphoros/bRNZV/2/" rel="nofollow">http://jsfiddle.net/Phosphoros/bRNZV/2/</a></p>
  
  <p>Many thanks in advance!</p>