AngularJS Ng-Repeat not iterating items in $Scope

Question

I'm currently trying to read a Json array of objects from my Employees API, which is returning the following,

 [
            {
                "Id": "00162c3a-2b70-4f50-80e8-6fee463cffdb",
                "EmployeeNumber": 123,
                "FirstName": "John",
                "Surname": "Smith",
                "JobTitle": "Developer",
                "Email": "jsmith@company.co.uk",
                "PhoneNumber": "89345 242397",
                "ExtensionNumber": "2895",
                "MobileNumber": "12343451234"
            },
            {
                "Id": "048b73e7-a84d-439b-97c2-0c611a076eb0",
                "EmployeeNumber": 125,
                "FirstName": "Billy",
                "Surname": "Smith",
                "JobTitle": "Developer",
                "Email": "bsmith@company.co.uk",
                "PhoneNumber": "89345 242397",
                "ExtensionNumber": "2896",
                "MobileNumber": "12343451223"
            }
 ]

In my AngularJs application I have a controller as follows,

'use strict';
app.controller('directoryController', ['$scope', 'Page', function ($scope, Page) {
    Page.setTitle('Employee Directory');

    $.ajax({
        url: 'http://localhost:8080/SGIntranetService/api/employee/',
        type: 'GET',
    }).success(function (data) {
        $scope.employees = data;

    //console.log($scope.employees);
    });
}]);

When returning to the console all of the objects appear to be there. Also to note, for some reason at the moment my Ajax call is making two requests to the Web API. (Not sure why this is)

Finally I am trying to use this in a partial view (ng-view), Only using one of the properties for testing until it starts working, then ill add the rest in.

<div class="container" ng-controller="directoryController">
<div ng-repeat="employee in employees">
    <h3>{{employee.FirstName}}</h3>
</div>

On my index.html (master page) I have the following.

<div class="site-content">
    <div class="content-header">
        <div class="container" ng-controller="pageController">
            <h1 class="page-title">{{Page.title()}}</h1>
        </div>
    </div>
    <div class="container">
        <div data-ng-view="">

        </div>
    </div>
</div>

Answer 1

Use $http to make any kind of ajax calls.

$http({
   url: "http://localhost:8080/SGIntranetService/api/employee/", 
   method: "GET"
}).success(function (data) {
    $scope.employees = data;

//console.log($scope.employees);
});;

Answer 2

Since you're doing a jQuery AJAX call, Angular is unaware of it, so the scope update will happen when/if something else forces a digest cycle. You don't want that.

The simplest fix would be to use Angular's $http service to do the AJAX call:

$http.get("http://localhost:8080/SGIntranetService/api/employee/")
     .success(function (data) {
         $scope.employees = data;
     }

Don't forget to inject the $http service into the controller:

app.controller('directoryController', 
              ['$scope', 'Page', '$http', function ($scope, Page, $http) {

---

QUICKFIX

If you still wish to keep using jQuery (for whatever the reason), you can force the scope digest by using $apply():

$.ajax({
        url: 'http://localhost:8080/SGIntranetService/api/employee/',
        type: 'GET',
    }).success(function (data) {
        $scope.employees = data;
        $scope.$apply();
    })

Answer 3

You are manipulating the scope outside the scope of angular.

To resolve your issue, using a $apply could be a bad option.

Instead, use $resource :

 'use strict';
 app.controller('directoryController', ['$scope', '$resource', 'Page', function ($scope, '$resource', Page) {
   Page.setTitle('Employee Directory');

   $resource('http://localhost:8080/SGIntranetService/api/employee/')
      .query()
      .then(function (data) {
          $scope.employees = data;
   });
}]);

Answer 4

You do call in controller, so maybe you twice insert controller, so there are two ajax calls. Look here for comparision of ajax and http calls. When using $http instead of ajax, you can rewrite your code like this:

app.controller('directoryController', ['$scope', 'Page','$http', function ($scope, Page,$http) {
    Page.setTitle('Employee Directory');

$http({
    url: 'http://localhost:8080/SGIntranetService/api/employee/',
    method: 'GET',
}).success(function (data) {
    $scope.employees = data;
});
}]);

You can use both ajax and $http calls. Pros for $http are:

• it is simple to write $http call - you don't have to precise headers and javascript objects are converted to JSON automatically
• $http have success method and error method
• $http can be used with $httpbackend service, to mockup calls for testing. I didn't check if $.ajax would work with this, but i see here, that people are asking about this.
• $http returns result as promise, so you can use this mechanism in your angular app.

There is one pros for ajax call, you can set async: true in this call and $http doesn't provide this.

In general it is better to migrate from JQuery Ajax, to Angulars $http, when working with Angularjs. But if you want for more deeper calls(like using REST), use $resource service.

Here is $http documentation.