title: AngularJS model is populated in javascript but empty on the page
body: <p><strong>I've got this code...</strong></p>
  
  <pre><code>Agencyapp.factory('AgencyData', function ($http, $log) {
  return {
      getAgencies: function(successcb){
          $http({ method: 'GET', url: 'http://localhost/MappingServicesWebAPI/api/mapping' }).
          success(function(data){
              successcb(data);
          }).
          error(function(data){
              $log.warn(data, status, headers, config);
          })
      }
  
  }
  });
  </code></pre>
  
  <p>Which gets data from a WebAPI.  The <code>$scope.Agencies</code> model gets populated with an <code>AgencyList</code> array. When I try to use that array...</p>
  
  <pre><code>&lt;div ng-controller="AgenciesCtrl"&gt;
      &lt;select ng-model="Agencies"&gt;
          &lt;option&gt;Select Agency&lt;/option&gt;
          &lt;option ng-repeat="A in Agencies" &gt;{{A.AgencyList.AgencyName}}&lt;/option&gt;
      &lt;/select&gt;
      {{Agencies.AgencyList}}
  &lt;/div&gt;
  </code></pre>
  
  <p>It's empty...can someone help me with what I might be doing wrong?</p>
  
  <p>Here's the controller, sorry I thought I included it...</p>
  
  <pre><code>Agencyapp.controller('AgenciesCtrl', function AgenciesCtrl($scope, AgencyData) {
  
  AgencyData.getAgencies().then(function (rtnAgencies) {
      $scope.Agencies = rtnAgencies;
  
  });
  </code></pre>
  
  <p>});</p>
  
  <p>I tried to post a picture of the populated $scope object but I don't have enough reputation points...</p>
  
  <p>It Looks like this(each indent is a nested object)...</p>
  
  <pre><code>$scope.Agencies
    [prototype]
    AgencyList[]
      [0]
        [prototype]
        AgencyID    -10168
        AgencyName  "#1 Insurance Agency"
  </code></pre>
  
  <p><strong>If I hard code data...</strong></p>
  
  <pre><code>function AgenciesCtrl($scope, AgencyData) {
  
  $scope.Agencies = [
              {
                  AgencyID: 'Test One',
                  AgencyName: 'Agency Test 1'
              },
              {
                  AgencyID: 'Test Two',
                  AgencyName: 'Agency Test 2'
              }];
  
  
  };
  </code></pre>
  
  <p><strong>It Works</strong></p>
  
  <p><strong>If I hard code data inside the function call</strong></p>
  
  <pre><code>function AgenciesCtrl($scope, AgencyData) {
  
  
  
  AgencyData.getAgencies().then(function (rtnAgencies) {
      $scope.Agencies = [
              {
                  AgencyID: 'Test One',
                  AgencyName: 'Agency Test 1'
              },
              {
                  AgencyID: 'Test Two',
                  AgencyName: 'Agency Test 2'
              }];
  
  
  });
  
  
  };
  </code></pre>
  
  <p><strong>It doesn't work</strong></p>
  
  <p>I haven't seen one good example of using data from a web api...all examples I have seen hard code data, what's the point in that? </p>