StackOverflow_22859052: get-the-option-value-of-the-select-tag-on-load-in-angular-js

Illustration of answer to http://stackoverflow.com/questions/22859052/get-the-option-value-of-the-select-tag-on-load-in-angular-js.

HTML

<script src="http://code.angularjs.org/1.2.15/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<div ng-controller="myCtrl">

<div ng-repeat="data in dataOfSeries">
  <hc-chart options="surveyResultChoice" data="data" class="chart" >Placeholder for generic chart</hc-chart>
</div>




                                        
</div>

CSS

.chart, .highcharts-container  {
  margin:10px auto;
  height: 300px;
  max-width: 100%;
  width: 100% !important;
  display:block;
}

JavaScript

var app = angular.module('myApp', []);
app.directive('hcChart', function () {
    return {
        restrict: 'E',
        template: '<div class="chart"></div>',
        scope: {
            options: '=',
            data: '='
        },
        link: function (scope, element) {
        
            scope.options.series = scope.data.seriesData;
            scope.options.title.text = scope.data.id;
        
         Highcharts.chart(element[0], scope.options);
        }
    };
});
app.controller('myCtrl', function ($scope) {

$scope.dataOfSeries = [{"id":123,"seriesData":[{"name":"Times","data":[[1505347200000,20]]},{"name":"Prices","data":[[1505347200000,80]]},{"name":"Cleaner","data":[[1505347200000,40]]},{"name":"Other","data":[[1505347200000,40]]}]},{"id":124,"seriesData":[{"name":"Donut","data":[[1505347200000,20]]},{"name":"Ice Cream","data":[[1505347200000,20]]},{"name":"Tea","data":[[1505347200000,40]]},{"name":"Coffee","data":[[1505347200000,20]]}]}];

var seriesData =[];



 var timePeriod = 'day';
 
$scope.surveyResultChoice = {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: ''
                        },
                        yAxis: {
                            title: {
                                text: 'Selection per response [%]'
                            }
                        },
                        xAxis: [{
                            type: "datetime",
                            title: {
                                text: null
                            },
                            dateTimeLabelFormats: {
                                month: "%e.%b<br/>%a"
                            }
                        }],
                        series: seriesData,
                        plotOptions: {
                      column: {
                          stacking: 'normal'
                      }
          ...