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">

<hc-chart options="surveyResultChoice" class="chart" >Placeholder for generic chart</hc-chart>


                                        
</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: '='
        },
        link: function (scope, element) {
            Highcharts.chart(element[0], scope.options);
        }
    };
});
app.controller('myCtrl', function ($scope) {
    
var seriesData =[{"name":"Times","data":[[1.5053472E12,20.0]]},{"name":"Prices","data":[[1.5053472E12,80.0]]},{"name":"Cleaner","data":[[1.5053472E12,40.0]]},{"name":"Other","data":[[1.5053472E12,40.0]]}];



 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'
                      }
                  },

                     tooltip: {
                shared: true,
                formatter: function() {
                    var tooltipText = '<span style="font-size:smaller;">' +
                            Highcharts.dateFormat('%A, %b %e, %Y', this.x) +
                            '</span><br/>';
                    $.each(this.points, function(i, series) {
                       ...