<!DOCTYPE html>
<html lang="en">

<head>

  <title>AngularJS Routing example</title>

  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body ng-app="sampleApp">

  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <ul class="nav">
          <li><a href="#AddNewOrder"> Add New Order </a></li>
          <li><a href="#ShowOrders"> Show Order </a></li>
        </ul>
      </div>
      <div class="col-md-9">
        <div ng-view></div>
      </div>
    </div>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="app.js"></script>

</body>

</html>
// Code goes here

/* Styles go here */

//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);

//Define Routing for app
//Uri /AddNewOrder -> template AddOrder.html and Controller AddOrderController
//Uri /ShowOrders -> template ShowOrders.html and Controller AddOrderController
sampleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
      .when('/AddNewOrder', { templateUrl: 'templates/add_order.html',
	                            controller: 'AddOrderController' })
	                           
      .when('/ShowOrders',  { templateUrl: 'templates/show_orders.html',
	                            controller: 'ShowOrdersController' })
	                            
      .otherwise({ redirectTo: '/AddNewOrder' });
}]);

sampleApp.controller('AddOrderController', function($scope) {
	$scope.message = 'This is Add new order screen';
});

sampleApp.controller('ShowOrdersController', function($scope) {
	$scope.message = 'This is Show orders screen';
});
<h2>Add New Order</h2>
{{ message }}
<h2>Show Orders</h2>
{{ message }}