AngularJS returns length 0 for array with objects in it
<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>