JSFiddle - React, Tailwind, and code Playground

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.pw}}"</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.pw"> ' + 
                            '<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.pw}}' +
                            '</div>',
                controller: function ($scope, DataService, $state) {
                    $scope.middlemsg = "loaded middle!";                  
                    /*
                    Ideally you do this with an entire class. eg. An identical (though detached from main data source) copy for editing. when on save updates its parent
                    */
                    $scope.password = {pw: DataService.getPassword().pw };
                    //If you only want to change this when you click a button then remove two way binding
                    $scope.setPassword = function () {
                        //here was the  nesting problem I didn't read over you'r entire fiddle so i missed it :S                        
                        DataService.setPassword($scope.password.pw);
                   ...