title: How to alert users when no option is available angularjs dropdown
body: <p>In AngularJS I am making an $http call to populate a dropdown box.
  In some cases the dropdown box will have no options to choose from, which would be equivalent to the code below </p>
  
  <pre><code>&lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
  
  &lt;select ng-model="selectedName" ng-options="x for x in names"&gt;
  &lt;/select&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
      $scope.names = [];
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Right now when I run this code the user just sees nothing. 
  I want to place a message in the dropdown box saying "No Data To Choose From".
  In order to do this, do I have to bind the message as an <code>ng-option</code> or is there a cleaner way of doing it so it does not look like "No Data To Choose From" is a legit choice such as the code below makes it seem.</p>
  
  <pre><code>&lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
  
  &lt;select ng-model="selectedName" ng-options="x for x in names"&gt;
  &lt;/select&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
      $scope.names = ["no data to choose from"];
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Basically if there are no options I want to let the user know in the cleanest way possible without binding the alert message as an option in the dropdown.</p>