appointment-main.html

<section layout="row">
<md-content layout="row" flex="66" layout-wrap>
    <md-card ng-repeat="d in $ctrl.dates" ng-class="$ctrl.getColor($index)" class="md-whiteframe-z2" flex flex-sm="40" flex-xs="100">
        <md-card-content>
            <h2>{{d.k | date:'dd-MMM-yyyy'}}</h2>
            <p layout="column">
                <md-button class="md-primary md-raised" 
                ng-repeat="i in d.v"
                ng-click="$ctrl.showAdvanced(i)"
                ng-disabled="!i.active"
                flex>
                    {{i.date | date:'h:mma'}}
                </md-button>
            </p>
        </md-card-content>
        <md-card-footer></md-card-footer>
    </md-card>
    
</md-content>
<md-card class="md-whiteframe-z2" flex="33">
    <md-card-content>
        <h2>Booked Appointments</h2>
        <p layout="column" ng-repeat="a in $ctrl.appointments">
            {{a.name}} ({{a.phone}}) => {{a.date | date:'dd-MMM-yyyy @ h:mma'}}
        </p>
    </md-card-content>
    <md-card-footer></md-card-footer>
</md-card>
</section>