title: using angularjs to fetch data doesn't work correctly
body: <p>I am trying to develop a simple web application using <code>angularjs</code> i have a table <code>city</code> that is created using entityframework <code>database first</code>.</p>
  
  <p>I added angularjs nuget to my project.and create 2 files in my project named <code>service</code> and <code>controller</code> as you can see here :</p>
  
  <p>controller </p>
  
  <pre><code>MyApp.controller('UpdateController', function ($scope, CityService) {
  
      getCities();
  
      function getCities() {
  
          CityService.getCities()
  
              .success(function (cities) {
  
                  $scope.cities = cities;
  
              })
  
              .error(function (error) {
  
                  $scope.status = 'Unable to load customer data: ' + error.message;
  
              });
  
      }
  
  });
  </code></pre>
  
  <p>Service :</p>
  
  <pre><code>MyApp.factory('CityService', ['$http', function ($http) 
  {
      var urlBase = 'http://localhost:37404/api';
  
      var CityService = {};
  
      CityService.getCities = function () {
  
          return $http.get(urlBase + '/default1');
  
      };
  
      return CityService;
  
  }]);
  </code></pre>
  
  <p>I pass the data using webapi as you can see :</p>
  
  <pre><code>namespace MvcApplication8.Controllers
  {
      public class Default1Controller : ApiController
      {
          private testDBEntities db = new testDBEntities();
  
          // GET: api/ManageStudentsInfoAPI  
          public IQueryable&lt;City&gt; GetStudent()
          {
              return db.Cities;
          }   
      }
  }
  </code></pre>
  
  <p>Here is my view :</p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="content-wrapper"&gt;
          &lt;div class="float-left"&gt;
              &lt;p class="site-title"&gt;
                  &lt;a href="~/"&gt;ASP.NET Web API&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="~/Scripts/jquery-1.7.1.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/angular.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/MyAngularFile/Service.js"&gt;&lt;/script&gt;
      &lt;script src="~/MyAngularFile/Controller.js"&gt;&lt;/script&gt;
  &lt;/header&gt;
  &lt;div id="body"&gt;
      &lt;div ng-controller="UpdateController"&gt;    
          &lt;table class="table"&gt;    
              &lt;tr&gt; 
  
                  &lt;th&gt;Id&lt;/th&gt;
  
                  &lt;th&gt;Name&lt;/th&gt;
  
                  &lt;th&gt;Country&lt;/th&gt;
  
              &lt;/tr&gt;
  
              &lt;tr ng-repeat="a in cities"&gt;
  
                  &lt;td&gt;{{a.Id}}&lt;/td&gt;
  
                  &lt;td&gt;{{a.Name}}&lt;/td&gt;
  
                  &lt;td&gt;{{a.Country}}&lt;/td&gt;
  
             &lt;/tr&gt;
  
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the result is like this :</p>
  
  <p><a href="https://i.stack.imgur.com/tN4eI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tN4eI.png" alt="enter image description here"></a></p>
  
  <p>My browser errors:</p>
  
  <p><a href="https://i.stack.imgur.com/qVIuY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qVIuY.png" alt="enter image description here"></a></p>