Why do I get undefined for response.name?

I have looked through all the related StackOverflow pages and nothing seemed to work for my situation. I tried to console.log(response) and it just said Object Object. I am unclear why I am getting "Welcome undefined" on my app when I was getting "Welcome " before.

app/facebook/facebook.js:

'use strict';

angular.module('ngSocial.facebook', ['ngRoute', 'ngFacebook'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/facebook', {
    templateUrl: 'facebook/facebook.html',
    controller: 'FacebookCtrl'
  });
}])

.config( function( $facebookProvider ) {
  $facebookProvider.setAppId('1410425285653598');
  $facebookProvider.setPermissions("email, public_profile, user_posts, publish_actions, user_photos");
})

.run(function($rootScope){
    (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk')); 
})

.controller('FacebookCtrl', ['$scope', '$facebook', function($scope, $facebook) {
    $scope.isLoggedIn = false;

    $scope.login = function(){
        $facebook.login().then(function(){
            $scope.isLoggedIn = true;
            refresh();
        });
    }


    $scope.logout = function(){
        $facebook.logout().then(function(){
            $scope.isLoggedIn = false;
            refresh();
        });
    }

    function refresh(){
        $facebook.api("/me",{fields:'last_name, first_name, email, gender, locale, link'}).then(function(response){
            $scope.welcomeMsg = "Welcome "+ response.name;
            $scope.isLoggedIn = true;
            $scope.userInfo = response;
            $facebook.api('/me/picture').then(function(response){
                $scope.picture = response.data.url;
                $facebook.api('/me/permissions').then(function(response){
                    $scope.permissions = response.data;
                    $facebook.api('/me/posts').then(function(response){
                        $scope.posts = response.data;
                    });
                });
            });
        },
        function(err){
            $scope.welcomeMsg = "Please Log In";
        });
    }

    $scope.postStatus = function(){
        var body = this.body;
        $facebook.api('/me/feed', 'post', {message: body}).then(function(response){
            $scope.msg = 'Thanks for Posting';
            refresh();
        });
    }

    refresh();
}]);

app/facebook/facebook.html:

<div class="row" ng-controller="FacebookCtrl">
  <div class="col-md-4">
    <h4>{{welcomeMsg}}</h4>
    <div ng-if="isLoggedIn == true">
      <a href="{{userInfo.link}}" target="_blank"><img ng-src="{{picture}}"></a>
    </div>
    <br>
    <div ng-if="isLoggedIn == false">
      <button type="button" class="btn btn-default" ng-click="login()">Login</button>
    </div>
    <div ng-if="isLoggedIn == true">
      <button type="button" class="btn btn-default" ng-click="logout()">Logout</button>
    </div>
    <br><br>
    <div ng-if="isLoggedIn == true" class="well">
      <h4>User Info</h4>
      <ul>
        <li>ID: {{userInfo.id}}</li>
        <li>First Name: {{userInfo.first_name}}</li>
        <li>Last Name: {{userInfo.last_name}}</li>
        <li>Email: {{userInfo.email}}</li>
        <li>Gender: {{userInfo.gender}}</li>
        <li>Locale: {{userInfo.locale}}</li>
      </ul>
    </div>
    <br>
    <div class="well" ng-if="isLoggedIn == true">
      <h4>Permissions</h4>
      <ul>
        <li ng-repeat="permission in permissions">{{permission.permission}} - {{permission.status}}</li>
      </ul>
    </div>
  </div>
  <div class="col-md-8">
    <h3>Welcome to Facebook!</h3>
    <div ng-if="isLoggedIn == true">
      <form ng-submit="postStatus()">
      <div class="form-group">
        <label>Status Update</label>
        <textarea ng-model="body" class="form-control"></textarea>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <br><br>
    <div ng-repeat="post in posts" class="stbody">
      <div class="stimg">
        <img ng-src="{{picture}}">
      </div>
      <div class="sttext">{{post.message}}<div class="sttime">{{post.updated_time}}</div>
    </div>
    </div>
  </div>
  <div ng-if="isLoggedIn == false">
    <p>You need to log in to post</p>
  </div>
</div>

app/index.html:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="ngSocial" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="ngSocial" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="ngSocial" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="ngSocial" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>NgSocial App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="app.css">
</head>
<body>
  <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">ngSocial</a>
        </div> 
      </div>
    </nav>

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div class="container">
    <div ng-view></div>
      <div class="row">

      </div>
  </div>


  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/ng-facebook/ngFacebook.js"></script>
  <script src="app.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
  <script src="facebook/facebook.js"></script>
</body>
</html>