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

  <head>
   
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">
    
    <script src="https://code.angularjs.org/1.4.9/angular.js"></script>
    <script src="navigationList.js"></script>
    <script src="demo.js"></script>
  </head>

  <body ng-controller="DemoCtrl">
    <h3>Demo</h3>
    <navigation-list list="list"></navigation-list>
  </body>

</html>
// Code goes here

var app = angular.module('demo', ['navigation-list']);

app.controller('DemoCtrl', function($scope) {
  $scope.list = [{
      heading: 'Module 1', 
      items: [
        {name: 'Page1', url: 'page1.html'},
        {name: 'Page2', url: 'page2.html'}
      ]
    },
    {
      heading: 'Module 2', 
      items: [
        {name: 'Page3', url: 'page3.html'},
      ]
    }];
});
/* Styles go here */

.navigation-list .nav-box {
  border: 1px solid lightgray;
  overflow: auto;
  height: calc(90vh);
}
.navigation-list .content-box {
  border: 1px solid lightgray;
  margin-left: 20px;
  height: calc(90vh);
}
.navigation-list a {
  text-decoration: none;
  cursor: pointer;
}
.navigation-list a.active {
  color: #fff;
  pointer-events: none;
}
.navigation-list .active-highlight {
  background-color: darkgray;
}
.navigation-list .same-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
<h3>Page1</h3>
<h3>Page2</h3>
<h3>Page3</h3>
var app = angular.module('navigation-list', []);
angular
  .module('navigation-list')
  .directive('navigationList', function () {
    return {
      restrict: 'E',
      templateUrl: 'navigationList.html',
      scope: {
        list: '=',
        defaultSelction: '='
      },
      link: function ($scope) {
        if (!$scope.list || !$scope.list.length || !$scope.list.length === 0) {
          console.error('invalid attribute object');
          return;
        }
        $scope.currentUrl = $scope.defaultSelction? $scope.defaultSelction : $scope.list[0].items[0].url;

        $scope.update = function(url) {
          $scope.currentUrl = url;
        }
      }
    };
  }).run(
  ['$templateCache', function($templateCache) {
      var DEFAULT_TEMPLATE = '<div class="navigation-list"><div class="same-height"><div class="col-md-3 nav-box">' +
        '<div ng-repeat="module in list"><div class="heading-bottom-line"><h4>{{module.heading}}</h4></div>' +  
        '<div ng-repeat="item in module.items"><div ng-class="{\'active-highlight\':item.url === currentUrl}">' +
        '<a ng-class="{\'active\':item.url === currentUrl}" ng-click="update(item.url)">{{item.name}}</a></div></div>' +
        '</div></div><div class="col-md-9 content-box"><div ng-include="currentUrl" /></div></div></div>';

      $templateCache.put('navigationList.html', DEFAULT_TEMPLATE);
  }]);