AngularJS ui-router

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.js"></script>
<div ui-view></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'])
    .config(['$stateProvider', function ($stateProvider) {

    $stateProvider.state('first', {
        url: "/",
        controller: 'firstCtrl',
        template: '<div><h1>First</h1><p>the value is {{value}}</p><p>the value is {{getValue()}}</p><button ng-click="update(42)">Set as 42</button><button ng-click="goto()">Go to Second</button></div>'
    })
        .state('second', {
        controller: 'secondCtrl',
        template: '<div><h1>Second</h1><p>the value is {{value}}</p><p>the value is {{getValue()}}</p><button ng-click="update(69)">Set as 69</button><button ng-click="goto()">Go to First</button></div>'
    });
}]).run(function ($rootScope, $state, $stateParams) {})
    .controller('MyAppCtrl', function ($scope, $state /*, $stateParams*/ ) {
    console.log("MyAppCtrl initialized!");
    $state.go("first");
});

function firstCtrl($scope, myService, $state) {
    console.log("firstCtrl initialized!");

    $scope.value = myService.theValue;
    $scope.getValue = myService.getvalue;
    $scope.update = myService.updatevalue;
    $scope.goto = function () {
        $state.go('second');
    }
};

function secondCtrl($scope, myService, $state) {
    console.log("secondCtrl initialized!");

    $scope.value = myService.theValue;
    $scope.getValue = myService.getvalue;
    $scope.update = myService.updatevalue;
    $scope.goto = function () {
        $state.go('first');
    }
};

myApp.factory('myService', function () {
   var somevalue = 2;

    var myService = {
        theValue: somevalue,
        updatevalue: updateValue,
        getvalue: getValue
    }

    return myService;

    function getValue() {
        return myService.theValue;
    }

    function updateValue(newValue) {
        myService.theValue = newValue;
    }
});