title: Angularjs highcharts and modal windows clear previous chart
body: <p>Hi I am displaying a chart in modal window with angularjs and highcharts. It is working fine the only problem is it won't clear a old chart on modal closing, here is my code</p>
  
  <pre><code>reportModule.directive('hcChart', function () {
     return {
          restrict: 'E',
          template: '&lt;div&gt;&lt;/div&gt;',
          replace: true,
  
          link: function (scope, element, attrs) {
  
              scope.$watch(function () { return attrs.chart; }, function () {
  
                  if (!attrs.chart) return;
  
                  var charts = JSON.parse(attrs.chart);
  
                  $(element[0]).highcharts(charts);
  
              });
          }
      };
  }); 
  </code></pre>
  
  <p>and my data</p>
  
  <pre><code>$scope.chartOptions = {
              chart: {
                  type: 'bar'
              },
              title: {
                  text: 'Title'
              },
              xAxis: {
                  categories:  ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
              },
  
              yAxis: {
                  min: 0,
                  title: {
                      text: yText,
                      align: 'high'
                  },
                  labels: {
                      overflow: 'justify'
                  }
              },
              credits: {
                  enabled: false
              },
              series: [{
                  name: 'Year 2016',
                  data: [107, 31, 635, 203, 2]
              }],
               plotOptions: {
                  bar: {
                      dataLabels: {
                          enabled: true
                      }
                  }
              },
              legend: {
                  layout: 'vertical',
                  align: 'right',
                  shadow: true
              },
              loading: true
      };
  </code></pre>
  
  <p>and html</p>
  
  <pre><code>&lt;hc-chart chart='{{ chartOptions }}'&gt;Placeholder for generic chart&lt;/hc-chart&gt;
  </code></pre>
  
  <p>Here what I tried</p>
  
  <pre><code>$('#report').on('hidden.bs.modal', function (e) {
        $timeout(function(){
          $scope.chartOptions=null;
        });
      })
  </code></pre>
  
  <p>but it is not working. I just want to clear old chart values on modal close please help</p>