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-style="getStyle(candidate.image)">
    {{candidate.name}}
</div>

<button ng-click="changeCandidate()">Click</button>

</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.controller('myCtrl', function ($scope) {

$scope.candidate = {
        "image" : "myurl.png",
        "name" : "My Name"
    };

    $scope.changeCandidate = function() {
                
        $scope.candidate.name = "Another Name";
        $scope.candidate.image = "https://media.mnn.com/assets/images/2014/09/running-with-dog.jpg.653x0_q80_crop-smart.jpg";
        
    };
    
    
    $scope.getStyle = function(url){
      return {
        'background-image': "url(" + url + ")",
        'background-position': 'center center'
      }      
    }
});