As of now, we are only displaying the names of our friends; we now need to display their profile picture and their birthdays (if they have updated it on their Facebook profile) too.

By using the Graph Explorer, you'll see that the endpoint that we need to call to get the required information is /me/friends?fields=birthday,name,picture.

Let's update the endpoint in our directive controller function by adding the following highlighted code. We make this change in the app/directives.js file, shown as follows:

$scope.loadFriends = function() {

  FB.api('/me/friends?fields=birthday,name,picture', function(response) {
    $scope.$apply(function() {
      $scope.myFriends = response.data;
    });

  });
}

We'll also need to update our view to create the placeholders for these additional pieces of information. So, let's modify our app/partials/partial1.html file as follows:

<div my-facebook></div>
<h1>My Friend's Birthdays</h1...