title: nvD3, AngularJs D3
body: <p>All --, Can any one help me to resolve the following, I am not getting where I am going wrong? My JSP page is as follows :</p>
  
  <pre><code>       &lt;html&gt;
          &lt;head&gt;
            &lt;meta charset="utf-8"&gt;  &lt;!-- it's important for d3.js --&gt;
          &lt;title&gt;&lt;bean:message key="welcome.title" /&gt; Dashboard&lt;/title&gt;
  
          &lt;script type="text/javascript" src="/js/angular.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/js/d3.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/js/nv.d3.min.js"&gt;&lt;/script&gt; &lt;!-- or use another assembly --&gt;
          &lt;script type="text/javascript" src="/js/angular-nvd3.js"&gt;&lt;/script&gt;
            &lt;script type="text/javascript" src="/js/stackedAreaChart.js"&gt;&lt;/script&gt;
  
          &lt;link rel="stylesheet" href="css/nv.d3.min.css"&gt; 
  
          &lt;/HEAD&gt;
          &lt;body&gt;
              &lt;div ng-app='myApp'&gt;
              &lt;div ng-controller='myCtrl'&gt;
                  &lt;nvd3 options='options' data='data'&gt;&lt;/nvd3&gt;
              &lt;/div&gt;   
              &lt;/div&gt;  
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p>The above code displaying the stacked Area chart correctly. Then I have replaced the
  above code with the following:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
        &lt;meta charset="utf-8"&gt;  &lt;!-- it's important for d3.js --&gt;
      &lt;title&gt;&lt;bean:message key="welcome.title" /&gt; Dashboard&lt;/title&gt;
  
      &lt;script type="text/javascript" src="/js/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/d3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/nv.d3.min.js"&gt;&lt;/script&gt; &lt;!-- or use another assembly --&gt;
      &lt;script type="text/javascript" src="/js/angular-nvd3.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="/js/stackedAreaChart.js"&gt;&lt;/script&gt;     
      &lt;link rel="stylesheet" href="css/nv.d3.min.css"&gt;     
      &lt;/HEAD&gt;
      &lt;body&gt;
         &lt;input type="button" value="Add Chart" onclick="addChart()" /&gt; 
         &lt;div id='myNew'&gt;     
         &lt;/div&gt;
  
  
      &lt;/body&gt;
    &lt;script type="text/javascript"&gt;
    function addChart() {
          alert("add Chart");    
      document.getElementById('myNew').innerHTML =  '&lt;div ng-app="myApp" &gt;' +
          ' &lt;div ng-controller="myCtrl"&gt;' +
  ' &lt;nvd3 options="options" data="data"&gt;&lt;/nvd3&gt; '+
  ' &lt;/div&gt; ' +
  ' &lt;/div&gt; ';
  
  }
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I click 'Add Chart' button it should display the chart but nothing is getting displayed. Only blank page is appearing. Can any one help me how to make this to work? </p>
  
  <p>I have included the stackedAreaChart.js as it is from <a href="http://krispo.github.io/angular-nvd3/js/stackedAreaChart.js" rel="nofollow">http://krispo.github.io/angular-nvd3/js/stackedAreaChart.js</a></p>