Establish a root views and child views

<html>
<head>
	<title>360-Disrupt</title>
	<!-- Main Style & Bootstrap-->
	<link rel="stylesheet" href="style.css"></link>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

	<!-- Angular & Angular ui-router -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>

	<!-- app -->
	<script src="script.js"></script>

    
	
</head>
<body ng-app="App" ng-controller="RootCtrl as rootCtrl">
<div id="wrap">
	<header ui-view="header"></header>
	<ui-view></ui-view>
	<footer ui-view="footer"></footer>
</div>	
</body>
</html>

// Code goes here

var module;

module = angular.module('App', ['ui.router']);

 module.config(function($urlRouterProvider, $stateProvider) {
      $urlRouterProvider.otherwise('/home');
      $stateProvider
        .state('root', {
          abstract: true,
          views: {
            '@': {
                controller: 'RootCtrl',
                controllerAs: 'rootCtrl'
            },
            'header@': {
                templateUrl: 'header.html',
                controller: 'HeaderCtrl',
                controllerAs: 'headerCtrl'
            },
            'footer@': {
                templateUrl: 'footer.html',
                controller: 'FooterCtrl',
                controllerAs: 'footerCtrl'
                }
           }
        })
        .state('root.home',{
            parent:'root',
            url:'',
            templateUrl:'home.html',
            controller: 'HomeController',
            controllerAs:'homeCtrl'
        });
    });
    
module.controller('RootCtrl', function() {
  this.rootUrl = './modules/';
});

module.controller('HeaderCtrl', function() {
	this.rootUrl = './modules/header/';
});

module.controller('FooterCtrl', function() {
	this.rootUrl = './modules/footer/';
});

//TODO MOVE INTO HOME MODULE FOLDER
module.controller('HomeController', ['$scope', function($scope) {
	this.rootUrl = '/home/';
	console.log('Home Ctrl');
}]);

module.run(function() {});

/* Styles go here */

/*Offsets*/
.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

body{

  margin: 0;
  padding: 0;
  margin-top: 6em;
  height: 100%;
  min-height: 100%;
  width: 100%;
  background: #FFFFFF;
  font-family: 'Droid Sans', sans-serif;
  color: #444444;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.5px;
  line-height:1.5;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family:"Aleo-Regular", serif;
}

h1, .h1 {
font-size: 4em;
}
h2, .h2 {
font-size: 2em;
}
h3, .h3 {
  font-size: 1em;
}

a {
  color:rgb(35, 179, 16);
}

a:hover {
  color:black;
}

th, td {
  padding: 5px;
  vertical-align: middle;
  text-align: center;
}

p p {/*Editor adds nested p tags*/
  font-size: 1em;
}

::selection {
  background: #23d10c;
  color: #FFFFFF;
}

.left {
  float: left;
}

.right {
  float: right;
}

.circle {
 display: block;
  width: 150px;
  height: 150px;
  margin: 1em auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-border-radius: 99em;
  -moz-border-radius: 99em;
  border-radius: 50%;
  border: 5px solid #eee;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
  max-width: none;
}

.border-radius {
  border-radius: 0.5em;
}

.clear-both {
 clear:both;
}

/*Buttons*/
.btn {
  font-weight: 500;
  font-size medium;
  padding: 0.3em 0.3em 0.3em 0.3em;
  text-transform: uppercase;
  display:inline-block;
}
.cta  {
  background: #23d10c;
  color: white;
  width: 90%;
  display: block;
  margin: 1em 0 0.5em 0;
}

.cta:hover {
  background:grey;
  color: white;
}

/*Colors*/
.ts-light-green {
  background-color:#F4F3DC;
}


.input-addon-samesize {
    min-width:8em;
    text-align:left;
}

.input-addon-samesize-long {
    min-width:16em;
    text-align:left;
}

.grey {
  color:grey;
}

.text-small {
  font-size:small;
}

.text-smaller {
  font-size:smaller;
}

.ng-invalid.ng-dirty {
border-color:red;
}

.ng-valid.ng-dirty {
border-color:green;
}

.inline {
display:inline;
}

a.cta  {
  width: 100%;
  font-size: 3em;
  padding: 0.5em;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
  border-radius: 10px;
}

@media only screen and (max-width:540px){
  .input-addon-samesize {
    min-width:3em;
  }

  .input-addon-samesize-long {
    min-width:6em;
  }

}

.navbar, .faq-table-bg {
  background-color:#EEEEEE;
}

.navbar {
  border-color:white;
}

.navbar ul {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  font-size: 2em;
  line-height: 2.5em;
  height: 2.5em;
  margin-left: 140px
}

.navbar li {
  display: inline;
  margin-right: 0.5em;
}

.navbar a {
  text-decoration: none;
}

.navbar p {
  margin-top: 1.5em;
}

.nav-auth, .nav-auth ul li a {
  font-size: small;
}

#logo {
  display: block;
  margin-top: 0.5em;
}

#site-header {
  margin-bottom: 5em;
}

@media only screen and (max-width:540px){
  .navbar a {
    font-size:0.6em;
  }

}

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  /*padding: 0 0 60px;*/
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}

<!-- Displays the logo -->
<header id="site-header">
  Blub Header
</header>

<footer>Blub Footer</footer>

<div class="container">
  <div class="row-fluid">
   Blub Main
  </div>
</div>