sidebar-template.html

<div class="action-bar">
    <div class="section">
        <div class="title">
            <span ng-show="isTodaysDate.isTrue">Today</span>
            <span ng-hide="isTodaysDate.isTrue">{{currentDate | date:"d MMM yyyy"}}</span>
        </div>
        <div class="content">
            <div class="morning">
                <div class="heading">Morning</div>
                <div class="cards" ng-repeat="item in data.all.current.morning">
                    <sidebar-card data="item"></sidebar-card>
                </div>
                <div class="message" ng-hide="data.all.current.morning.length > 0">
                    Nothing planned
                </div>
            </div>
            <div class="afternoon">
                <div class="heading">Afternoon</div>
                <div class="cards" ng-repeat="item in data.all.current.afternoon">
                    <sidebar-card data="item"></sidebar-card>
                </div>
                <div class="message" ng-hide="data.all.current.afternoon.length > 0">
                    Nothing planned
                </div>
            </div>
            <div class="evening">
                <div class="heading">Evening</div>
                <div class="cards" ng-repeat="item in data.all.current.evening">
                    <sidebar-card data="item"></sidebar-card>
                </div>
                <div class="message" ng-hide="data.all.current.evening.length > 0">
                    Nothing planned
                </div>
            </div>
            <div class="night">
                <div class="heading">Night</div>
                <div class="cards" ng-repeat="item in data.all.current.night">
                    <sidebar-card data="item"></sidebar-card>
                </div>
                <div class="message" ng-hide="data.all.current.night.length > 0">
                    Nothing planned
                </div>
            </div>
        </div>
    </div>
</div>