<html>
<head>
    <title>Angular Dialog Service</title>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="style.css">

    <script type='text/javascript' src="script.js"></script>
    <script type='text/javascript' src="https://rawgit.com/long2know/angular-dialog-service/master/src/dialogService.js"></script>
</head>
<body ng-app="myApp">
<div ng-include="'menu.html'"></div>
<div ui-view="main" class="container"></div>

<script type="text/ng-template" id="menu.html">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <span class="navbar-brand">Our Menu</span>
            </div>
        </div>
    </nav>
</script>

<script type="text/ng-template" id="state1.html">
    <div class="container">
        <div class="wizard small row ng-cloak" ng-cloak>
            <a ng-repeat="state in vm.states" ng-click="vm.setCurrent(state)" ng-class="{ 'current': state.isCurrent }" ng-href="{{state.href}}" ng-if="state.isVisible">
                <div class="badge" style="display:none;">
                    @*<div class="border"></div>
                        <div class="number">{{$index + 1}}</div>*@
                </div>
                {{ state.name }}
            </a>
        </div>

        <div class="wizard row ng-cloak" ng-cloak>
            <a ng-repeat="state in vm.states" ng-click="vm.setCurrent(state)" ng-class="{ 'current': state.isCurrent }" ng-href="{{state.href}}" ng-if="state.isVisible">
                <div class="badge">
                    <div class="border"></div>
                    <div class="number">{{$index + 1}}</div>
                </div>
                {{ state.name }}
            </a>
        </div>

        <div class="wizard left-arrow row ng-cloak" ng-cloak>
            <a ng-repeat="state in vm.states" ng-click="vm.setCurrent(state)" ng-class="{ 'current': state.isCurrent }" ng-href="{{state.href}}" ng-if="state.isVisible">
                <div class="badge" style="display:none;">
                    @*<div class="border"></div>
                <div class="number">{{$index + 1}}</div>*@
                </div>
                {{ state.name }}
            </a>
        </div>

        <div class="wizard small left-arrow row ng-cloak" ng-cloak>
            <a ng-repeat="state in vm.states" ng-click="vm.setCurrent(state)" ng-class="{ 'current': state.isCurrent }" ng-href="{{state.href}}" ng-if="state.isVisible">
                <div class="badge">
                    <div class="border"></div>
                    <div class="number">{{$index + 1}}</div>
                </div>
                {{ state.name }}
            </a>
        </div>
    </div>

    <div class="form-group form-inline" role="form">
        <div class="form-group">
            <label>Enter number of states</label>
            <input name="stateCount" type="number" class="form-control" ng-model="vm.stateCount" ng-change="vm.stateCountChange()" placeholder="Enter a number" />
        </div>
    </div>
</script>

</body>
</html>
/* wizard with arrows */
.nomargin {
    padding: 0 !important;
    margin: 0 !important;
}

.wizard {
    background-color: white;
    padding: 0.2em 0em 0.2em 0.2em;
}

    .wizard a {
        padding: 20px 12px 20px;
        position: relative;
        display: inline-block;
        text-decoration: none;
        min-width: 24.75%;
        margin-left: 3px;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        color: #FFFFFF;
        background: #8BBFE6;
        text-transform: uppercase;
        cursor: pointer;
    }

        .wizard a:hover {
            text-decoration: none;
        }

        .wizard a:first-child {
            margin-left: 0;
        }

    .wizard:not(.left-arrow) a:before {
        width: 0;
        height: 0;
        border-top: 30px inset transparent;
        border-bottom: 30px inset transparent;
        border-left: 30px solid #FFFFFF;
        position: absolute;
        content: "";
        top: 0;
        left: 0;
    }


    .wizard:not(.left-arrow) a:after {
        width: 0;
        height: 0;
        border-top: 30px inset transparent;
        border-bottom: 30px inset transparent;
        border-left: 30px solid #8BBFE6;
        position: absolute;
        content: "";
        top: 0;
        right: -30px;
        z-index: 2;
    }

    .wizard.left-arrow a:before {
        width: 0;
        height: 0;
        border-top: 30px inset transparent;
        border-bottom: 30px inset transparent;
        border-right: 30px solid #8BBFE6;
        position: absolute;
        content: "";
        top: 0;
        left: -30px;
        z-index: 2;
    }

    .wizard.left-arrow a:after {
        width: 0;
        height: 0;
        border-top: 30px inset transparent;
        border-bottom: 30px inset transparent;
        border-right: 30px solid #FFFFFF;
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        z-index: 2;
    }

    .wizard a:first-child:before,
    .wizard a:last-child:after {
        border: none;
    }

    .wizard a:first-child {
        -webkit-border-radius: 4px 0 0 4px;
        -moz-border-radius: 4px 0 0 4px;
        border-radius: 4px 0 0 4px;
    }

    .wizard a:last-child {
        -webkit-border-radius: 0 4px 4px 0;
        -moz-border-radius: 0 4px 4px 0;
        border-radius: 0 4px 4px 0;
        /*May want another class and the :before rather than using last-child.*/
        background-color: #3E95D6;
    }

    .wizard.left-arrow a:last-child:before,
    .wizard.small.left-arrow a:last-child:before {
        border-right-color: #3E95D6;
    }

    .wizard .badge {
        margin: 0 5px 0 18px;
        position: relative;
        top: -1px;
    }

    .wizard a:first-child .badge {
        margin-left: 0;
    }

    .wizard .current, .wizard a.progress-current {
        background: #363636;
        color: #fff;
    }

        .wizard a.current:after, .wizard a.progress-current:after {
            border-left-color: #363636 !important;
        }

    .wizard.left-arrow a.current:before, .wizard.left-arrow a.progress-current:before,
    .wizard.small.left-arrow a.current:before, .wizard.small.left-arrow a.progress-current:before {
        border-right-color: #363636;
    }

    .wizard a.current .badge, .wizard a.progress-current .badge {
        background-color: #FFFFFF;
        color: #363636;
    }

    .wizard.small {
        margin-bottom: 15px;
    }

        .wizard.small a {
            padding: 5px 12px 5px;
        }

        .wizard.small:not(.left-arrow) a:before {
            border-top: 15px inset transparent;
            border-bottom: 15px inset transparent;
            border-left: 15px solid #FFFFFF;
        }

        .wizard.small:not(.left-arrow) a:after {
            border-top: 15px inset transparent;
            border-bottom: 15px inset transparent;
            border-left: 15px solid #8BBFE6;
            right: -15px;
        }

        .wizard.small.left-arrow a:before {
            border-top: 15px inset transparent;
            border-bottom: 15px inset transparent;
            border-right: 15px solid #8BBFE6;
            left: -15px;
            z-index: 2;
        }

        .wizard.small.left-arrow a:after {
            width: 0;
            height: 0;
            border-top: 15px inset transparent;
            border-bottom: 15px inset transparent;
            border-right: 15px solid #FFFFFF;
        }

        .wizard.small a:first-child:before,
        .wizard.small a:last-child:after {
            border: none;
        }

/* IE11 border bug fixes... hooray! */
_:-ms-fullscreen, :root .wizard.small.left-arrow a:before {
    left: -14px;
}

_:-ms-fullscreen, :root .wizard.small:not(.left-arrow) a:after {
    right: -14px;
}

_:-ms-fullscreen, :root .wizard.left-arrow a:before {
    left: -29px;
}

_:-ms-fullscreen, :root .wizard:not(.left-arrow) a:after {
        right: -29px;
}
(function () {
    angular.module('myApp.services', ['ngResource', 'ngAnimate']);
    angular.module('myApp.controllers', []);
    angular.module('myApp.directives', []);

    var myApp = angular.module('myApp', [
        'myApp.services',
        'myApp.controllers',
        'myApp.directives',
        'ngSanitize',
        'ui.bootstrap',
        'ui.router',
        'ui']);

    var state1Ctrl = function ($filter) {
        var
            vm = this,
            init = function () {
                vm.states.length = 0;
                for (var i = 0; i < vm.stateCount; i++) {
                    vm.states.push({ name: 'Step ' + (i + 1).toString(), heading: 'Step ' + (i + 1).toString(), isVisible: true });
                }
            };
        vm.stateCountChange = function () {
            vm.stateCount = isNaN(vm.stateCount) ? 2 : vm.stateCount;
            init();
        };
        
        vm.setCurrent = function(state) {
            for (var i=0; i < vm.states.length; i++)
            {
                vm.states[i].isCurrent = false;
            }
            state.isCurrent = true;
        };

        vm.states = [];
        vm.stateCount = 2;
        init();
    };

    state1Ctrl.$inject = ['$filter'];
    angular.module('myApp.controllers')
        .controller('state1Ctrl', state1Ctrl);

    myApp.config(['$locationProvider', '$stateProvider', '$urlRouterProvider',

    function ($locationProvider, $stateProvider, $urlRouterProvider) {

        $locationProvider.html5Mode(false);

        $urlRouterProvider.when('/', '/state1')
            .otherwise("/state1");

        $stateProvider.state('app', {
            abstract: true,
            url: '/',
            views: {
                'main': {
                    template: '<div ui-view>/div>'
                }
            }
        })
        .state('app.state1', {
            url: 'state1',
            templateUrl: 'state1.html',
            controller: 'state1Ctrl',
            controllerAs: 'vm',
            reloadOnSearch: false
        })
    }]);

    myApp.run(['$log', function ($log) {
        $log.log("Start.");
    }]);
})()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.