[Solved]-How to Load HighChart dynamically within angular UI Accorion(uib-Accordion)?-Highcharts

How about creating a new directive for the chart where you create the chart option and the chart container there.

<example-highchart></example-highchart>

exampleHighchart.js

(function() {
  'use strict';
  angular
    .module('yourModule')
    .directive('exampleHighchart', exampleHighchart);

function exampleHighchart() {
  return {
    templateUrl: 'example-highchart.template.html',
    restrict: 'E',
    scope: {
      id: '='
    },
    replace: 'true',
    link: linkFn
  };

  function linkFn(scope, element) {
    element.find('.highchart-element').highcharts(createOptions());

    function createOptions() {
      // your chart option goes here
    }

    function updateChartData() {
      // you can start the loading animation here
      // and then hide it in the the then block

      // get the highchart element reference to update the properties.
      var chart = element.find('.highchart-element').highcharts();
      $http({
        method: "GET",
        url: "/api/Board/getMapdataOnId",
        params: {
          id: parseInt(id)
        }
      }).then(function (response) {
        var boardData = response.data;
        var dateData = [], rateData = [];
        for (var i = 0; i < boardData.gData.length; i++) {
          dateData.push(Date.parse(boardData.gData[i].date));
          rateData.push(boardData.gData[i].maxRate);
        }
        // update the categories info and the series data
        chart.xAxis[0].setCategories(dateData);
        chart.series[0].setData(rateData);
      });
    }
  }
}

})();

highchart-example.template.html:

 <div>
   <!-- you can add your loading gif here and display it while it's loading -->
   <div class="example-highchart" />
 <div>

Don't call ng-click as

<uib-accordion-heading ng-click="open({{data.id}})" class="header">

it should be as

<uib-accordion-heading ng-click="open(data.id)" class="header">