title: Setting default selected option in dropdown menu with AngularJS
body: <p>I am trying to create a dropdown menu with AngularJS. I created a factory (‘disResource’) and use $resource to retrieve data from a database. </p>
  
  <p><strong>Factory:</strong></p>
  
  <pre><code>angular.module('app').factory('disResource', ['$resource', function($resource) {
    return $resource('/api/disciplines/:dis_id', {}, {
      query: {method:'GET', params: {}, isArray:true},
      create: { method: 'POST' },
      show: { method: 'GET' },
      update: { method: 'PUT', params: {dis_id: '@dis_id'}},
      delete: { method: 'DELETE', params: {dis_id: '@dis_id'} }
    });
  }]);
  </code></pre>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>angular.module("app").controller("AdminDisSearchCtrl", ['$scope', 'disResource', function ($scope, disResource) { 
  
    disResource.query(function(reply) {
      $scope.results = { disciplines: reply};
    });
  }]);
  </code></pre>
  
  <p><strong>View:</strong></p>
  
  <pre><code>&lt;h2&gt;Select Discipline:&lt;/h2&gt;
    &lt;select data-ng-model="filterItem.discipline" data-ng-options="item.dis_name for item in results.disciplines"&gt;&lt;/select&gt;  
  </code></pre>
  
  <p>Everything works well, the dropdown is populated with the $resource data and Console.log indicates that everything gets loaded.</p>
  
  <p><strong>console.log($scope):</strong></p>
  
  <pre><code>...
  results: Object
  disciplines: Array[6]
  0: Resource
    $$hashKey: "00F"
    created_at: "2014-03-13 18:59:25"
    dis_id: 1
    dis_name: "AAA"
    updated_at: "2014-03-13 18:59:25"
    __proto__: Resource
  1: Resource
  ...
  </code></pre>
  
  <p>However, the dropdown shows a blank space. When I try to specify the default dropdown item in the controller</p>
  
  <pre><code>$scope.filterItem = {
    discipline: $scope.results.disciplines[0]    
  };
  </code></pre>
  
  <p>I receive a Console Error:
  TypeError: Cannot read property 'disciplines' of undefined</p>
  
  <p>When I hardcode the data into the controller, everything works:</p>
  
  <pre><code>$scope.results = {
    disciplines: [
     { dis_id:1, dis_name:'AAA' },
     { dis_id:2, dis_name:'BBB' }
    ]
  };
  
  $scope.filterItem = {
    discipline: $scope.results.disciplines[0]
  };
  </code></pre>
  
  <p><strong>console.log($scope):</strong></p>
  
  <pre><code>...
  results: Object
    disciplines: Array[2]
    0: Object
      $$hashKey: "007"
      dis_id: 1 
      dis_name: "AAA"
      __proto__: Object
    1: Object
    ...
  </code></pre>
  
  <p><strong>Question:</strong>
  Why can't I set the default drop-down option when I retrieve the data from the database?</p>