sample/index.html
<!doctype html>
<html lang="en" ng-app="sample-app" ng-controller="AppController">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular pagePiling.js Directive</title>
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
<link rel="stylesheet" href="vendor/pagePiling.js/jquery.pagepiling.css">
<link rel="stylesheet" href="styles.css">
<select id="demosMenu" ng-model="$root.chosenPage" ng-change="$root.changePage()">
<option value="" selected disabled>Choose Demo</option>
<option value="main">Main Page</option>
<option value="dynamic">Dynamic Options</option>
</select>
<main ui-view></main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="vendor/pagePiling.js/jquery.pagepiling.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app/directives/angular-pagepiling.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.config.js"></script>
<script src="app/app.controller.js"></script>
<script src="app/views/main/main.controller.js"></script>
<script src="app/views/dynamic/dynamic.controller.js"></script>
</html>