Populate Highchart using json data in Angular js
<p>I am trying to populate data from json file to Highchart. my example json file is same as Highchart example, my data.json would be:</p>

<pre><code>{"yData":[{
            "name": "Tokyo",
            "data": [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            "name": "New York",
            "data": [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            "name": "Berlin",
            "data": [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            "name": "London",
            "data": [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]}
</code></pre>

<p>My html file is </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
  &lt;title&gt;High chart using directive&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;  
 &lt;/head&gt;
 &lt;body&gt;
  &lt;section ng-app="charts"&gt;
   &lt;div ng-controller="Ctrl"&gt;
        &lt;highchart chart='{{renderChart}}'&gt;&lt;/highchart&gt;
        &lt;table&gt;
            &lt;tr ng-repeat="record in jsondatafeed"&gt;
                &lt;td&gt;{{record.Name}}&lt;/td&gt;
                &lt;td&gt;{{record.Score}}&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
   &lt;/div&gt;
  &lt;/section&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('charts', []);

app.directive('highchart', 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);

        });
    }
};
});


app.controller('Ctrl', function ($scope, $http, $timeout) {
$http.get('data.json').success(function (data, status) {

    var score = [];
    

    var name = [];
    for (var i = 0; i &lt; data.length; i++) {
        name.push(data[i].Name);
  for (var j = 0; j &lt; data.length; j++) {
        score.push(data[j].Score);   
    }
    }

    $scope.renderChart = {
        chart: {
            type: 'line'
        },
        xAxis: {
            categories:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
  yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        series: [{
   name: name,
            data: score
        }],
  
  
        legend: {
            enabled: false
        }
    };
}).error("error message");
$timeout($scope.fetch, 1000);
});</code></pre>
</div>
</div>
</p>

<p>Now i am able to populate the chart for one name only and data<a href="https://i.stack.imgur.com/n2LpZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n2LpZ.png" alt="current output"></a></p>

<p>but i need to feed all data from json file. what is the point i am missing here. 
Regards,
Vinoth Kannan P</p>