Edit in JSFiddle

//    A little bit of data needed to get jsfiddle to fake an ajax request
var fiddleResponse = 'json=' + encodeURIComponent(angular.toJson({
    name: "Nerd"
}));
var fiddleHeaders = {
    headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
};

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

app.config(function($routeProvider) {

    var getName = function(NameService) {
        return NameService.getName();
    };
    
    $routeProvider
   .when('/home', {
       templateUrl: '/home.html',
       controller: 'MainController'
   })
   .when('/profile', {
       templateUrl: '/profile.html',
       controller: 'ProfileController',
       resolve: {
           name: getName
       }
   })
   .otherwise({redirectTo: '/home'});
});

app.factory('NameService', function($http, $q) {

    //    Create a class that represents our name service.
    function NameService() {
    
        var self = this;
        
        //    Initially the name is unknown....
        self.name = null;
          
        //    getName returns a promise which when fulfilled returns the name.
        self.getName = function() {
            
            //    Create a deferred operation.
            var deferred = $q.defer();
            
            //    If we already have the name, we can resolve the promise.
            if(self.name !== null) {
                deferred.resolve(self.name + " (from Cache!)");
            } else {
                //    Get the name from the server.
                $http.post('/echo/json/', fiddleResponse, fiddleHeaders)
                .success(function(response) {
                    self.name = response.name;
                    deferred.resolve(response.name + " (from Server!)");
                })
                .error(function(response) {
                    deferred.reject(response);
                });
            }
            
            //    Now return the promise.
            return deferred.promise;
        };
    }
    
    return new NameService();
});

app.controller('MainController', function ($scope, NameService) {

    //    We have a name on the code, but it's initially empty...
    $scope.name = "";
    
    //    We have a function on the scope that can update the name.
    $scope.updateName = function() {
        NameService.getName()
            .then(
                /* success function */
                function(name) {
                    $scope.name = name;
                },
                /* error function */
                function(result) {
                    console.log("Failed to get the name, result is " + result); 
            });
    };
});

app.controller('ProfileController', function($scope, name) {

    $scope.name = name;
});

<div ng-app="app">
    <p> <a href="#/home">Home</a> | <a href="#/profile">Profile</a></p>
    <ng-view>Loading!</ng-view>
        
    <script type="text/ng-template" id="/home.html">
        <h3>Home</h3>
        <p>This demo shows how to use promises in an AngularJS router.</p>
        <p>Click <a href="#/profile">Profile</a> to see your user profile.</p>
    </script>
    
    <script type="text/ng-template" id="/profile.html">
        <h3>Profile</h3>
        <p>Hello {{name}}</p>
    </script>
    
</div>