Edit in JSFiddle

<div ng-app="app">   
    <div class="body-content panel-body">
        <h5 class="text-center text-info">Simple Order System by ozkary.com</h5>        
        <div ng-view class="col-sm-10 col-sm-offset-1">
        </div>               
    </div>   
   
    <script type="text/ng-template" id="customer.html">
        <div class="container-fluid">
            <div class="row">
                <i class="fa fa-user fa-2x">&nbsp;</i><b>{{ctrl.order.name}}</b>
            </div>
            <hr />
            <div class="row">
                <div class="control-group">
                    <div class="controls">
                        <label class="control-label">Customer Name</label>
                        <input class="form-control" ng-model="ctrl.order.name" placeholder="enter name" type="text">
                    </div>
                </div>
            </div>
            <div class="row"><br /></div>
            <div class="row">
                <div class="control-group">
                    <button ng-click="ctrl.next()" class="input-sm"><i class="fa fa-chevron-right">&nbsp;</i>Next</button>
                </div>
            </div>
        </div>
    </script>

    <script type="text/ng-template" id="dish.html">
        <div class="container-fluid">
            <div class="row">
                <i class="fa fa-user fa-2x">&nbsp;</i><b>{{ctrl.order.name}}</b>
            </div>
            <div class="row">
                <i class="fa fa-cutlery fa-2x">&nbsp;</i><b>{{ctrl.order.dish}}</b>
            </div>
            <hr />
            <div class="row">
                <div class="control-group">
                    <div class="controls">
                        <label class="control-label">Dish</label>
                        <input class="form-control" ng-model="ctrl.order.dish" placeholder="enter a dish name" type="text">
                    </div>
                </div>
            </div>
            <div class="row"><br /></div>
            <div class="row">
                <div class="control-group">
                    <button ng-click="ctrl.next()" class="input-sm"><i class="fa fa-chevron-right">&nbsp;</i>Next</button>
                </div>
            </div>
        </div>
    </script>

    <script type="text/ng-template" id="drink.html">
        <div class="container-fluid">
            <div class="row">
                <i class="fa fa-user fa-2x">&nbsp;</i><b>{{ctrl.order.name}}</b>
            </div>
            <div class="row">
                <i class="fa fa-cutlery fa-2x">&nbsp;</i><b>{{ctrl.order.dish}}</b>
            </div>
            <div class="row">
                <i class="fa fa-glass fa-2x">&nbsp;</i><b>{{ctrl.order.drink}}</b>
            </div>
            <hr />
            <div class="row">
                <div class="control-group">
                    <div class="controls">
                        <label class="control-label">Drink</label>
                        <input class="form-control" ng-model="ctrl.order.drink" placeholder="enter a drink name" type="text">
                    </div>
                </div>
            </div>
            <div class="row"><br /></div>
            <div class="row">
                <div class="control-group">
                    <button ng-click="ctrl.next()" class="input-sm"><i class="fa fa-chevron-right">&nbsp;</i>Next</button>
                </div>
            </div>
        </div>
    </script>
    <script type="text/ng-template" id="order.html">
        <div class="container-fluid">
            <h3>Order Summary</h3>
            <div class="row">
                <i class="fa fa-user fa-2x">&nbsp;</i><b>{{ctrl.order.name}}</b>
            </div>
            <div class="row">
                <i class="fa fa-cutlery fa-2x">&nbsp;</i><b>{{ctrl.order.dish}}</b>
            </div>
            <div class="row">
                <i class="fa fa-glass fa-2x">&nbsp;</i><b>{{ctrl.order.drink}}</b>
            </div>
            <div class="row"><br /></div>
            <div class="row">
                <div class="control-group">
                    <button ng-click="ctrl.next()" class="input-sm"><i class="fa fa-chevron-right">&nbsp;</i>New Order</button>
                </div>
            </div>
        </div>
    </script>
</div>
<br/>

(function (angular) {
            'use strict';
            var appName = 'app';
            var app = angular.module(appName, ['ngRoute']);
            app.config(['$routeProvider', cfgRoutes]);
            app.factory('svcAppData', ['$location',svcAppData]);
            app.controller('ctrCustomer', ['svcAppData', ctrCustomer]);
            app.controller('ctrDish', ['svcAppData', ctrDish]);
            app.controller('ctrDrink', ['svcAppData', ctrDrink]);
            app.controller('ctrOrder', ['svcAppData', ctrOrder]);

            //app route configuration
            function cfgRoutes($routeProvider) {
                var routes = [{ path: '/customer', templateUrl: 'customer.html', controller: 'ctrCustomer' },
                            { path: '/dish', templateUrl: 'dish.html', controller: 'ctrDish' },
                            { path: '/drink', templateUrl: 'drink.html', controller: 'ctrDrink' },
                            { path: '/order', templateUrl: 'order.html', controller: 'ctrOrder' }]
                routes.forEach(function (route) {
                    $routeProvider.when(route.path, {
                        templateUrl: route.templateUrl,
                        controller: route.controller,
                        controllerAs: 'ctrl',
                    });                                       
                });

                $routeProvider.otherwise({ redirectTo: '/customer' });
            }

            //shared application data
            function svcAppData($location) {
                var service = {
                    detail: {},
                    customer: customer,
                    dish: dish,
                    drink: drink,
                    order:order,
                    send:send
                };

                return service;

                function customer() {
                    this.detail = { name: '', dish: '', drink: '' };
                    loadRoute('/customer');
                }

                function dish() {
                    loadRoute('/dish');
                }

                function drink() {
                    loadRoute('/drink');
                }

                function order() {
                    loadRoute('/order');
                }

                function loadRoute(path) {
                    $location.path(path);
                }

                //mock send api
                function send() {                    
                    console.log(this.order);
                }
                
            }

            //controllers
            function ctrCustomer(svcAppData) {
                console.log('ctrCustomer loaded');
                var ctrl = this;
                ctrl.order = svcAppData.detail;

                ctrl.next = function () {
                    svcAppData.dish();
                }
            }
            function ctrDish(svcAppData) {
                console.log('ctrDish loaded');
                var ctrl = this;
                ctrl.order = svcAppData.detail;

                ctrl.next = function () {
                    svcAppData.drink();
                }
            }
            function ctrDrink(svcAppData) {
                console.log('ctrDrink loaded');
                var ctrl = this;
                ctrl.order = svcAppData.detail;

                ctrl.next = function () {
                    svcAppData.order();
                }
            }
            function ctrOrder(svcAppData) {
                console.log('ctrOrder loaded');
                var ctrl = this;
                ctrl.order = svcAppData.detail;

                ctrl.next = function () {
                    svcAppData.customer();
                }
            }           

        })(angular);