<!DOCTYPE html>
<html ng-app="asideApp">
<head>
<link data-require="bootstrap-css@3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://rawgit.com/dbtek/angular-aside/master/dist/css/angular-aside.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.2.21/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-0.11.0.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="https://rawgit.com/dbtek/angular-aside/master/dist/js/angular-aside.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="jumbotron">
<h1>Angular Aside</h1>
<p>
<button type="button" class="btn btn-default btn-lg" ng-click="openAside('left')">
<span class="glyphicon glyphicon-align-justify"></span> Menu
</button>
<a href="https://github.com/dbtek/angular-aside" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-download"></span> Download</a>
<button type="button" class="btn btn-default btn-lg pull-right" ng-click="openAside('right')">
Menu <span class="glyphicon glyphicon-align-justify"></span>
</button>
</p>
</div>
</body>
</html>
angular.module('asideApp', ['ui.bootstrap', 'ngAside'])
.controller('MainCtrl', function($scope, $aside) {
var asideInstance = $scope.openAside = function openAside(position) {
$aside.open({
placement: position,
templateUrl: 'aside.html',
size: 'lg'
});
};
});
/* Styles go here */
body {
padding-top: 30px;
}
<div class="modal-header">
<h3 class="modal-title">ngAside</h3>
</div>
<div class="modal-body">
Look i'm in aside.
</div>
<div class="modal-footer">
<button class="btn btn-primary">OK</button>
<button class="btn btn-warning">Cancel</button>
</div>