title: AngularJS ngOptions not populating dropdown menu
body: <p>I do not understand why ng-options is not populating the dropdown menu. JSON data is being returned from the service. I can <code>console.log</code> the data in the controller. So, why is <code>ng-options</code> not populating the dropdown</p>
  
  <pre><code>&lt;tr class="info"&gt;
     &lt;td class = "col-xs-3"&gt;Maximum page size: &lt;/td&gt;
     &lt;td class = "col-xs-9" ng-controller = "converseController"&gt; Show conversations per page 
     &lt;select ng-model = "selectedNumber" ng-options="conversation for conversation in conversations"&gt;
          &lt;option value = ""&gt; Choose the number of conversations &lt;/option&gt;
     &lt;/select&gt;
  
     &lt;aside id = "pageSize"&gt; Show contacts per page 
        &lt;select&gt;
           &lt;option&gt; 20 &lt;/option&gt;
        &lt;/select&gt;
     &lt;/aside&gt;
   &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p><code>converse.js</code> - Controller</p>
  
  <pre><code>(function() {
      'use strict';
  
      var converseController = function (getData, $scope) {
          var url = '../../data/conversation.json';
          getData.fetchData(url)
              .then(function(data){
                      $scope.coversations = data.conversation;
                      console.log($scope.coversations);
          });
      };
  
      angular.module('assignment3App')
        .controller ('converseController', ['getData', '$scope', converseController]);        
  }());
  </code></pre>
  
  <p><code>conversation.json</code></p>
  
  <pre><code>{
      "conversation": [
          10,  
          20,
          30,  
          40, 
          50,  
          60, 
          70, 
          80,  
          90,
          100
      ]
  }
  </code></pre>
  
  <p>Service - <code>promise.js</code></p>
  
  <pre><code>(function() {
    'use strict';
  
    var getData = function (fetchDataService) {
        this.fetchData = function(filePath) {
  
               return fetchDataService.getContent(filePath)
                  .then(function (returnedData) {
                      return returnedData.data;
                    });
                };   
        };    
  
        angular.module('assignment3App')
          .service ('getData', ['fetchDataService', getData]);
  }());
  </code></pre>
  
  <p>Service - <code>callJson.js</code></p>
  
  <pre><code>(function() {
    'use strict';
  
    var fetchDataService = function($http) {
        this.getContent = function(path) {
          return $http({
              method : 'get',
              url : path
            });
        };
    };
  
    angular.module('assignment3App')
      .service ('fetchDataService', fetchDataService);
  }());
  </code></pre>