Highcharts not displaying charts through angular controller

Question

I started playing with highcharts for a project I am doing. Highcharts was displaying properly when I dumped a massive array of data into it, but now that I am trying to parse through groups of data that I retrieved through MongoDB I can't get it to display.

Here is my angular

 $scope.retrieveData = function(){
  $http.get('/calldata').then(function(response){
    $scope.toneDatas = response.data
    var idArray = []
    angular.forEach($scope.toneDatas, function(value, key) {
      idArray.push({id: value._id, social_tone_data: value.social_tone_data})
      for (var i = 0; i < idArray.length; i++) {
        if (idArray[i].id === value._id) {
          console.log(idArray[i].id)
          var socialToneName = []
          var socialToneScore = []
          angular.forEach(value.social_tone_data, function(value, key) {
            socialToneScore.push(value.tone_score)
            socialToneName.push(value.tone_type)
          })
          $("#" + value._id).highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: socialToneName
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                data: socialToneScore
            }]
          });

        };
      };
    })
  });
};

When the page loads a get request calls the database and gets the data to be served to the web page, and I am trying for now to get the data group social_tone_data to display on a chart. I have 19 documents in my mongo database and want it so that each time the loop completes, one chart is generated and served to my webpage. I should have 19 charts. I am still playing around with the code but any help is appreciated.

UPDATE

I refactored my code through an angular directive and used the element argument to display on the page.

Answer 1

Some good info using NG-Highcharts .

as others have said, use a directive to modify dom elements, not controller & def not jQuery as updates fall outside of angulars digest loop.

Your example needs the supplemental template/html code to be relevant.