Angular UI- Router Inherited Views - angularjs

Question

My index.html file is as follows..
<div id="main">
<div ui-view>
</div>
My home.html file is as follows..
<div login id="loginBox"></div>
<div ng-show="users.length">
<hr/>
<div ui-view="header"></div>
<div ui-view="footer"></div>
My app.js file is as follows
var myapp=angular.module('angularProject', ['ui.bootstrap','ui.router','angularProject.filters', 'angularProject.services', 'angularProject.directives', 'angularProject.controllers'])
myapp.config(['$stateProvider', '$routeProvider' ,'$urlRouterProvider',function($stateProvider,$routeProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
abstract:true,
url : "/home",
templateUrl : 'views/home.html',
controller : 'homeCtrl'
// views: {
// "": {
// url:"/home",
// templateUrl: 'views/home.html',
// controller: 'homeCtrl'
// },
// "header#home": {
// templateUrl: "views/header.html"
// }
// }
})
.state('header', {
url : '/header',
templateUrl : 'views/header.html'
})
.state('footer', {
url : '/footer',
templateUrl : 'views/footer.html'
})
}]);
Which is an incomplete one. How should i design my app.js such that i can have following flow of view.
Home is parent in which header and footer are views..

Answer 1

It worked like this..
$urlRouterProvider.otherwise("home");
$stateProvider
.state('home', {
//abstract:true,
// url : "/home",
// templateUrl : 'views/home.html',
// controller : 'homeCtrl'
url:'',
views: {
'': {
//url:"/home",
templateUrl: 'views/home.html',
controller: 'homeCtrl'
},
"header#home": {
templateUrl: "views/header.html"
},
"footer#home": {
templateUrl: "views/footer.html"
},
"container#home": {
templateUrl: "views/container.html"
}
}
})

Answer 2

2 options:
You can use the default angular ngRoute module (Reference with example here and here).
You would have something like this:
index.html: (contains the layout of your website, including header/footer)
<div login id="loginBox"></div>
<div ng-show="users.length">
<hr/>
<div id="header"></div>
<div ng-view></div>
<div id="footer"></div>
home.html: (partial view of dynamic content to load dynamically)
<div id="content">
Your home content.
</div>
app.js:
var myApp = angular.module('myApp', []);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
}).
when('/page2', {
templateUrl: 'partials/page2.html',
controller: 'Page2Ctrl'
}).
otherwise({
redirectTo: '/home'
});
}]);
Or you can use ui-router for more advanced routing features. See this very good tutorial to get started.
-EDIT
Using $stateProvider, here is an example in Plunker that works with an index, linking to a sub-view "home".