title: AngularJS returns length 0 for array with objects in it
body: <p>I am trying to dynamically set the type of page based on the number of articles available for that page. So, if i have 2 or more articles, give me the listing page, if i have one, just give me the details page. The thing is, even doe i can see my articles on the page, the <code>length</code> property always returns 0. Need a bit of help figuring this out. Here's the code for the entire controller:</p>
  
  <p>so, this kind of works now: (see bellow the image for what I am getting in the console)</p>
  
  <pre><code>//Public page - List of articles
  bordonHillControllers.controller('PageListCtrl', ['$scope', '$location' , 'Page_Articles', '$routeParams', function ($scope, $location, Page_Articles, $routeParams) {
      $scope.pageId = $routeParams.pageId;
      var deferred = $.Deferred();
      var articles = Page_Articles.get({ id: $scope.pageId });
      deferred.resolve(articles);
      deferred.promise().then(function successCallback(data, status, headers, config) {
          $scope.articles = data;
          if ([$scope.articles[0]].length == 1) {
              console.log([$scope.articles])
              //$location.path('/article/' + article.id);
          }
      }, function errorCallback(response) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
          return $scope.errorMessage = "Something went wrong!";
      })
      $scope.formatDate = function (date) {
          var dateOut = new Date(date);
          return dateOut;
      };
  }])
  </code></pre>
  
  <p>here is where I set up the service:</p>
  
  <pre><code>bordonHillServices.factory('Page_Articles', ['$resource',
    function ($resource) {
        return $resource('/api/ArticlesByPageApi/', {}, {
            get: { method: 'GET', params: { id: 'pages' }, isArray: true },
        });
    }])
  </code></pre>
  
  <p>here is the service that is sending the data:</p>
  
  <pre><code>        //Get: Api/HomeApi
      [HttpGet]
      public async Task&lt;HttpResponseMessage&gt; Get(int id)
      {
          HttpResponseMessage response;
          try
          {
              var articles = await Task.FromResult(context.Articles.Where(p =&gt; p.Page_ID == id).Select(p =&gt; new { DatePublished = p.DatePublished, ID = p.ID, Image_ID = p.Image_ID, IsHomeFeatured = p.IsHomeFeatured, IsHomeMain = p.IsHomeMain, IsNewsFeatured = p.IsNewsFeatured, IsNewsMain = p.IsNewsMain, Page_ID = p.Page_ID, Preview = p.Preview, Title = p.Title, Image = context.Images.FirstOrDefault(o =&gt; o.ID == p.Image_ID) }).ToList());
              response = Request.CreateResponse(HttpStatusCode.OK, articles);
          }
          catch (System.Exception ex)
          {
              response = Request.CreateResponse(HttpStatusCode.BadRequest, "Could Not Load The Requested Data");
              throw ex;
          }
          return response;
      }
      protected override void Dispose(bool disposing)
      {
          if (disposing)
          {
              this.context.Dispose();
          }
          base.Dispose(disposing);
      }
  </code></pre>
  
  <p>So again, just to make sure I am clear: I need to return the number of articles in the <code>$scope.articles</code>.</p>
  
  <p>I also tried <code>$scope.articles.data</code>(before using deffered, I thought since the api runs async that might be the issue but still doesn't work).</p>
  
  <p>this is the template for the html:</p>
  
  <pre><code>$templateCache.put(
  '~/Views/Home/pageList.cshtml',
  
  '&lt;section id="appContent" ng-controller="PageListCtrl"&gt;' +
      '&lt;div class="row"&gt;' +
          '&lt;div class="form-group form-horizontal" style="display: flex;"&gt;' +
              '&lt;label class="padding10"&gt;Search: &lt;/label&gt;' +
              '&lt;input class="padding10 form-control" style="display:inline" ng-model="query"&gt;' +
              '&lt;label class="padding10"&gt;Order: &lt;/label&gt;' +
              '&lt;select class="padding10 form-control" style="display:inline" ng-model="orderProp"&gt;' +
                  '&lt;option value="title"&gt;Alphabetical&lt;/option&gt;' +
                  '&lt;option value="datePublished"&gt;By Date&lt;/option&gt;' +
              '&lt;/select&gt;' +
          '&lt;/div&gt;' +
      '&lt;/div&gt;' +
          '&lt;div ng-repeat="article in articles | filter:query | orderBy:orderProp | filter: { isNewsFeatured : false}" class="col-md-12 article-listing"&gt;' +
              '&lt;br /&gt;&lt;br /&gt;' +
              '&lt;div class="row"&gt;' +
              '&lt;div class="col-sm-12 col-md-4 col-lg-2" ng-if="article.image.path"&gt;' +
                  '&lt;a href="#/article/{{article.id}}" class="thumb thumbnail"&gt;' +
                      '&lt;img ng-src="{{article.image.path}}" alt="{{article.title}} image:"&gt;' +
                  '&lt;/a&gt;' +
              '&lt;/div&gt;' +
              '&lt;a href="#/article/{{article.id}}"&gt;&lt;h3&gt;{{article.title}}&lt;/h3&gt;&lt;/a&gt;' +
              '&lt;p class="publishedDate"&gt;Published on: &lt;span ng-bind="formatDate(article.datePublished) | date"&gt;&lt;/span&gt;&lt;/p&gt;' +
              '&lt;div class="col-sm-12 col-md-8 col-lg-10 preview"&gt;{{article.preview}}&lt;/div&gt;' +
              '&lt;br /&gt;' +
          '&lt;/div&gt;' +
          '&lt;div class="buttons"&gt;' +
              '&lt;a href="#/article/{{article.id}}"&gt;Read more...&lt;/a&gt;' +
          '&lt;/div&gt;' +
      '&lt;hr /&gt;' +
      '&lt;/div&gt;' +
  '&lt;/section&gt;'
  )
  </code></pre>
  
  <p>It all works, i am getting 2 articles listed(that's how many i have set for this page) but length it's still 0;
  <a href="https://i.stack.imgur.com/RVVOW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RVVOW.jpg" alt="i am getting an array of json object from the service"></a></p>