Criando um wizard | AngularJS: crie webapps poderosas

Olá, Estou tentando criar um wizard, mas estou apanhando bastante. Quero salvar o valor informando e utilizar em outra, mas quando navego para segunda página está em branco.

Por favor me ajudem! :D

O que tenho é seguinte:

//index.html

<!DOCTYPE html>
<html lang="pt-br" ng-app="carreira">

    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <title>Carreira</title>

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/efeitos.css">
        <link rel="stylesheet" href="css/estilo.css">

        <script src="js/lib/angular.min.js"></script>

        <script src="js/main.js"></script>

        <script src="js/controllers/carreira-controller.js"></script>
        <script src="js/controllers/principal-controller.js"></script>

        <script src="js/lib/angular-animate.min.js"></script>
        <script src="js/lib/angular-route.min.js"></script>
        <script src="js/lib/angular-resource.min.js"></script>

        <script src="js/services/dados-compartilhados.js"></script>

    </head>

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


</html>

\\main.js

angular.module('carreira', ['ngRoute'])
    .config(function($routeProvider, $locationProvider)  {

        $locationProvider.html5Mode(true);

        $routeProvider.when('/carreira',{
            templateUrl: 'partials/bemvindo.html',
            controller : 'CarreiraController'
        });

        $routeProvider.when('/carreira/principal',{
            templateUrl: 'partials/principal.html',
            controller : 'PrincipalController'
        });

        $routeProvider.otherwise({redirectTo: '/carreira'});

    });

//dados-compartilhados.js
angular.module('carreira')
.service('dadosCompartilhados',function(){
    var usuarioApp = {
        nome : '',
        cargoAtual : '',
        cargoPretendido : ''
    };


    this.getNome = function(){
        return usuarioApp.nome;
    }

    this.setNome = function(nome){
         usuarioApp.nome = nome;
    }

});

//carreira-controller.js
angular.module('carreira')
.controller('CarreiraController', function($scope, dadosCompartilhados) {
     var empregado = {
         nome:''
     };

    dadosCompartilhados.setNome('teste'); 

});

//principal-controller.js
angular.module('carreira')
.controller('PrincipalController', function($scope, dadosCompartilhados) {
     var empregado = {
         nome:''
     };

    empregado.nome = dadosCompartilhados.getNome(); 

});

bemvindo.htlm
<div class="container">
    <div class="panel panel-defautl">
        <div class="panel-heading">
            <h2 class="text-center">Bem vindo!!</h3>
        </div>
        <div class="panel-body">
        </div> 
    </div>


    <form>
        <input class="form-control" placeholder="Como gosta de ser chamado?" ng-model="empregado.nome">
    </form>

</div>


<div class="jumbotron">
    <h1 class="display-3 text-center" >{{empregado.nome}}</h1>
    <hr class="my-4">
</div>

<div>

    <a href="/carreira/principal" type="button" class="btn btn-default btn-lg alinha-embaixo-direita">
         <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
    </a>

</div>

//principal.html
<div class="jumbotron">
    <h1 class="display-3 text-center" >{{empregado.nome}}</h1>
    <hr class="my-4">
</div>