var app = angular.module('plunker', ["ngRoute"]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
   $scope.pageIndex = 0;
  
  /*
   * Updates current Page index
   */
  $scope.changeIndex= function(indexToChange){
  
       $scope.pageIndex = indexToChange;
	}
});




<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.6.4/angular.js" data-require="angular.js@1.4.x"></script>
    <script data-require="angular.js@1.6.x" data-semver="1.6.4" src="mainController"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script data-require="angular.js@1.4.x" data-semver="1.4.9" src="mainController"></script>
 
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <div class="mainframe">
	    <div class="navigation">
		    <ul class="list-group">
		  	  <li class="list-group-item" ng-click="changeIndex(0)">Home<span class="status-icon"></span></li>
		    	<li class="list-group-item" ng-click="changeIndex(1)">Sign Up<span class="status-icon"></span></li>
		    	<li class="list-group-item" ng-click="changeIndex(2)">About<span class="status-icon"></span></li>
		    </ul>
	 </div>

	    
	    <div class="content">
       <div ng-if="pageIndex == 0" ng-include ="'Home.html'"></div>
       <div ng-if="pageIndex == 1" ng-include = "'SignUp.html'"></div>
       <div ng-if="pageIndex == 2" ng-include = "'About.html'"></div>
      </div>
      
      
          
   

<div ng-view></div>
      
  </div>
    
</body>

</html>

/* Put your css in here */

.mainframe {
	margin: 0;
    padding: 0;
    width: 100%;
    height: 100% !important;
    float: left;
}

.navigation {
    width: 30%;
    height: 500px !important;
    padding: 5px 5px;
    background: #9c27b0;
    color:white;
    font-weight:bold;
    border: none;
    border-right: solid 1px #AAA;
    float: left;
    overflow: auto;
}

.content {
    margin-left: 35%;
    padding: 20px 20px;
}


<H2>Sign In</H2>

<form>
  First name:<br>
  <input type="text" name="firstname">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

<H2>Honey I am Home</H2>

<img src="https://i.stack.imgur.com/4Ksiz.jpg" 
alt="Smiley face">

<H2>Something About You </H2>

<img src = "https://i.ytimg.com/vi/MV_3Dpw-BRY/hqdefault.jpg">