title: How to select an option in a dropdown list angularjs
body: <p>I am using AngularJS directive and I need to set a selected option of a dropdown list in my template. </p>
  
  <pre><code>&lt;select id="energySource" ng-options="o.name for o in energyOptions" ng-model="energy" ng-selected="energy" ng-change="energyChange();"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>The content of the optionlist depends on resources send by a server when the page is loaded.</p>
  
  <pre><code>var energyChosen = "All";
  
  
        angular.element(document).ready(function () {
  
            $.get('/Dashboard/GetResources', function (data) {
  
                scope.Resources = data;
  
                scope.energyOptions = [{ name: scope.Resources.Electricity, id: "Electricity" }, { name: scope.Resources.Gas, id: "Gas" },
                 { name: scope.Resources.Water, id: "Water" }, { name: scope.Resources.Solar, id: "Solar" }];
  
                scope.energy = scope.energyOptions[0];
                energyChosen = scope.energy.id;
  
                scope.$apply();
  
            });
  </code></pre>
  
  <p>It works except that a blank option is preselected which disappears when i select an option
  I would like to be able to preselect one option. I thought that     </p>
  
  <pre><code>scope.energy = scope.energyOptions[0];
  </code></pre>
  
  <p>would do the trick but it didn't. How can i preselect an option in this case ?</p>