<!DOCTYPE html>
<html >
<head>
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="angular.js@1.5.0" data-semver="1.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link data-require="angular.js@1.5.0" data-semver="1.5.0" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />
<script data-require="angular.js@1.5.0" data-semver="1.5.0" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.4/ui-bootstrap-tpls.min.js"></script>
<script data-require="angular.js@1.5.0" data-semver="1.5.0" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
<script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script type="text/javascript">
</script>
</head>
<body ng-app="ACE" ng-controller="LayoutController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header"></div>
<script type="text/ng-template" id="treeMenu">
<a ng-if="(MenuList | filter:{ParentCategoryID : menu.ID}).length == 0" href="{{menu.URL}}">{{menu.LinkText}}</a>
</script>
<ul class="nav navbar-nav">
<li ng-repeat="menu in MenuList | filter: {ParentCategoryID : 0}" ng-include="'treeMenu'"></li>
<li id="btnLogOut"><a href="#">Log out</a></li>
</ul>
</div>
</nav>
</body>
</html>
// Code goes here
var mainApp = angular.module("ACE", []);
mainApp.controller("LayoutController", function ($scope) {
var xList = [];
xList.push({ ID : 1, LinkText: "Activity", URL: "/CRM/Activity/", ParentCategoryID: 0 });
xList.push({ ID : 2, LinkText : "Business Partners", URL : "/CRM/BusinessPartner/", ParentCategoryID : 0 });
xList.push({ ID : 3, LinkText : "Sales", URL : "#", ParentCategoryID : 0 });
xList.push({ ID : 4, LinkText : "Sales Opportunities", URL : "/CRM/OpportunityMaster/", ParentCategoryID : 3 });
xList.push({ ID : 5, LinkText: "Sales Quotation", URL: "/CRM/SalesQuotation/", ParentCategoryID: 3 });
xList.push({ ID : 6, LinkText : "Sales Order", URL : "/CRM/SalesOrder/", ParentCategoryID : 3 });
xList.push({ ID : 7, LinkText : "Delivery", URL : "/CRM/Delivery/", ParentCategoryID : 0 });
xList.push({ ID : 8, LinkText : "Service Call", URL : "/CRM/ServiceCall/", ParentCategoryID : 0 });
xList.push({ ID: 9, LinkText: "Customer Equipment Card", URL: "/CRM/EquipmentCard/", ParentCategoryID: 0 });
$scope.MenuList = xList;
});
/* Styles go here */