Updating Body with AngularJS

Trying to build a small website that has the same header and footer, but updates the body section. Currently, I have the header, body, and footer pages displayed in my index.html, but not sure how to update the body section when clicking the button load page_02.

This is the code I have so far:

Index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Page Management</title>
    <script src="../../Scripts/angular.min.js"></script>
    <script src="controller.js"></script>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <div ng-controller="pageManager">
       <div ng-include="header = 'header.html'"></div>
       <div ng-include="body = 'page1.html'"></div>
       <div ng-include="footer = 'footer.html'"></div>
    </div>
</body>
</html>

header.html

<div class="mainHeader">
    <h1>Header</h1>
    <form action="page2.html">
        <input type="submit" value="Load Page_02">
    </form>
</div>

page1.html

<div class="page1">
    <h1>Body - Page_01</h1>  
</div>

page2.html

<div class="page2">
    <h1>Body - Page_02</h1>
</div>

footer.html

<div class="mainFooter">
    <h1>Footer</h1>
</div>

controller.js

angular.module('myApp', [])
    .controller('pageManager', function($scope) {
        $scope.header = "header.html";
        $scope.body = "page1.html";
        $scope.footer = "footer.html";
    });

styles.css

* {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.mainHeader {
    background-color: red;
    width: 100%;
    height: 150px;
    text-align: center;
}

.mainFooter {
    background-color: green;
    width: 100%;
    height: 500px;
    text-align: center;
}

.page1 {
    background-color: grey;
    width: 100%;
    height: 500px;
    text-align: center;
}

.page2 {
    background-color: blue;
    width: 100%;
    height: 500px;
    text-align: center;
}

You can use ngRoute or ui.router please see demo here using ngRoute http://plnkr.co/edit/sFcpDrGMy3CmsKJgTZH1?p=preview

<body ng-app="newappt">
  <div class="mainHeader">
    <h1>Header</h1>
    <a href="#/page1">Page 1</a> | <a href="#/page2">Page 2</a>
  </div>
  <div ng-view="" class="container"></div>
  <div class="mainFooter">
    <h1>Footer</h1>
  </div>
</body>

and js:

var newappt = angular.module('newappt', ['ngRoute']);


newappt.config(function($routeProvider) {
  $routeProvider
    .when('/page1', {
      templateUrl: 'page1.html',
      controller: 'pageManager'


    })
    .when('/page2', {
      templateUrl: 'page2.html',
      controller: 'pageManager'
      })

  .otherwise({
    redirectTo: '/page1'
  });
});

newappt.controller('pageManager', function($scope) {


});