AngularJS ui-router

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="http://cdn.jsdelivr.net/angular.ui-router/0.2.8/angular-ui-router.js"></script>
<div ui-view="top" class="top"></div>
<div ui-view="middle" class="middle"></div>
<div ui-view="bottom" class="bottom"></div>

CSS

.top {
    border: 1px solid black;
    position: relative;
    width: 400px;
    height: 200px;
}
.middle {
    border: 1px solid blue;
    position: relative;
    width: 400px;
    height: 200px;
}
.bottom {
    border: 1px solid red;
    width: 400px;
    height: 200px;
}

JavaScript

/* myApp module */
var myApp = angular.module('myApp', ['ui.router', 'PasswordConfirmModule', 'DataServiceModule'])
    .config(['$stateProvider', function ($stateProvider) {

    $stateProvider.state('home', {
		url: "",
        views: {
            'top': {
				url: "",
                template: '<div>{{topmsg}}<br /><br />' + 
                            'Password is: "{{password}}"</div>',
                controller: function ($scope, DataService) {
                    $scope.topmsg = "loaded top!";
                    $scope.password = DataService.getPassword();
                    console.log("top ctrl loaded!");
                }
            },
            'middle': {
				url: "",
                template: '<div>{{middlemsg}}<br /><br />' + 
                            '<input ng-model="password"> ' + 
                            '<button ng-click="setPassword()">Set New Password!</button><br />' + 
                            '<button ng-click="GoToState(\'home.passwordconfirm\')">Go To Confirm State!</button>' +
                            '<br /><br />password model in this scope is: {{password}}' +
                            '</div>',
                controller: function ($scope, DataService, $state) {
                    $scope.middlemsg = "loaded middle!";
                    $scope.password = DataService.getPassword();
                    
                    $scope.setPassword = function () {
                        DataService.setPassword($scope.password);
                    };

                    $scope.GoToState = function (state) {
                        console.log("GoToState function kicked off...");
                        $state.go(state);
                    };

                    console.log("middle ctrl loaded!");
                }
            },
            'bottom': {
				url: "",
                template: '<div>{{bottommsg}}<br /><br />Password is "{{password}}"</div>',
                controller: function ($scope, DataService)...