Различный вывод в консоли и в HTML с Angular

Извините, если это глупый вопрос, но это мой первый раз, используя Angular и обещания.

Я только что прошел через учебник, и это часть моего кода.

<div ng-app="app">
    <div ng-controller="MainController">
        <a href ng-click="updateName()">Update Name</a>
        <p><strong>Name:</strong> {{name}}</p>
    </div>
</div>

var app = angular.module('app', []);

app.factory('NameService', function($http, $q) {
    function NameService() {
        var self = this;
        self.name = null;
            var deferred = $q.defer();
            if(self.name !== null) {
                deferred.resolve(self.name + " (from Cache!)");
            } else {
            $http.get("xxx.php")
                .success(function(name) {
                    //Here
                    console.log(name.xxx[0].xxx) 
                    self.name = name.xxx[0].xxx
                    deferred.resolve(name + " (from Server!)");
                .error(function(response) {
                    deferred.reject(response);
                });
            }
            return deferred.promise
        }
    }
    return new NameService();
});

app.controller('MainController', function ($scope, NameService) {
    $scope.name = "";
    //$scope.updateName = function() {
        NameService.getName()
            .then(
            function(name) {
                $scope.name = name;
            },
            function(result) {
                console.log("Failed to get the name, result is " + result); 
            });
    //};
});

Моя консоль регистрирует вывод, который я хочу получить, но в HTML мой вывод [object Object]