cart.html

<md-dialog aria-label="Cart">
    <md-dialog-content>
<div class="start-margin end-margin top-margin bottom-margin">
    <!--<h1>Cart</h1>-->
    <div layout="row">
        <!-- Item -->
        <div flex="60" class="center">
            Item
        </div>

        <!-- Quantity -->
        <div flex="20" class="end">
            Quantity
        </div>

        <!-- Price -->
        <div flex="20" class="end">
            Unit Price
        </div>

    </div>

    <hr>

    <div layout="row" layout-align="center center" ng-repeat="item in items">
        <!-- Item -->
        <div flex="60" layout="row" layout-align="center center">
            <div class="start-margin end-margin">
                <img class="wl-image-small grey-bg" ng-src="http://lorempixel.com/500/500/">
            </div>
            <div>
                {{item.name}}
            </div>
        </div>

        <!-- Quantity -->
        <div flex="20" layout='row' layout-fill layout-margin layout-align='end center'>
            <!--<span class="glyphicon glyphicon-plus start-margin-small end-margin-small"></span>-->
            <!--{{item.quantity}}-->
            <!--<span class="glyphicon glyphicon-minus start-margin-small end-margin-small"></span>-->
            <md-select ng-model="item.quantity" ng-change="recalculate()">
                <md-option ng-value="qty" ng-repeat="qty in quantities">{{ qty }}</md-option>
            </md-select>
        </div>

        <!-- Price -->
        <div flex="20" class="end">S$ {{item.price | number:2}}</div>

    </div>

    <hr>

    <div layout="row">

        <!-- Subtotal -->
        <div flex="20" offset="60">
            <div class="end">
                Subtotal
            </div>
        </div>

        <div flex="20">
            <div class="end">
                S$ {{subtotal | number:2}}
            </div>
        </div>

    </div>

    <div layout="row">

        <!-- Tax -->
        <div flex="20" offset="60">
            <div class="end">
                Tax
            </div>
        </div>

        <div flex="20">
            <div class="end">
                S$ {{tax | number:2}}
            </div>
        </div>

    </div>

    <div layout="row">
        <div flex offset="50">
            <hr>
        </div>
    </div>

    <div layout="row">

        <!-- Total -->
        <div flex="20" offset="60">
            <div class="end">
                <b>Total</b>
            </div>
        </div>

        <div flex="20">
            <div class="end">
                <b>S$ {{total | number:2}}</b>
            </div>
        </div>

    </div>

    <div layout-sm="column" layout="row" layout-align-sm="center end">
        <div flex-gt-sm></div>

        <div>
            <md-button class="md-warn md-raised top-margin">Checkout</md-button>
        </div>

        <div>
            <md-button class="md-primary md-raised top-margin" ng-click="back()">Cancel</md-button>
        </div>
    </div>

</div>
    </md-dialog-content>
    </md-dialog>