title: AngularJS How do I pre select the value of a dropdown when the value is retrieved from a webservice?
body: <p>Hello community been stuck on this one for a while...</p>
  
  <p><strong>Scenario:</strong> 
  I have a dropdownlist which I pre-populate with values fetched from a service.
  Now that same object returned from the service lets me know the value that needs to be pre-selected for that dropdownlist. The service returns a JSON object with all this information.</p>
  
  <p>Sample JSON Returned from service</p>
  
  <pre><code>{
      "stepsInvolved": [{
          "label": "Step 1",
          "value": "Step 1"
      }, {
          "label": "Step 1",
          "value": "Step 1"
      }, {
          "label": "Step 1",
          "value": "Step 1"
      }],
      "valueSelected": {
          "label": "Step 1",
          "value": "Step 1"
      }
  }
  </code></pre>
  
  <p>Question</p>
  
  <p>Using Angular I'm assigning the dropdown list values from <code>stepsInvolved</code> into a scope variable <code>$scope.options</code> thats pretty straight forward.</p>
  
  <p><em>How do I preselect the value on the dropdownlist with the value indicated in the "valueSelected" from the JSON object? How do you accomplish this with angular?</em> </p>
  
  <p>JSFiddles and Plunkers are welcome.</p>
  
  <p>P.S : Obviously this doesn't work for this scenario</p>
  
  <pre><code>$scope.options= stepsInvolved;
  $scope.selectedOption = $scope.options[1];
  </code></pre>