md-dialog does not render on the current calendar

Question

I am using fullcalendar to display a series of records within a calendar. It is working beautifully.

I am now attempting to add the ability to click a day to add a new event. I have added the dayClick code below:

$("#calendar").fullCalendar({
    ...
    dayClick: function (date, jsEvent, view) {
        $scope.AddDailyRecord(date);
    },
    ...
});

The function AddDailyRecord is below:

$scope.AddDailyRecord = function (date) {
    if (date) {
        $scope.reportDate = date.format("YYYY-MM-DD");
        $scope.reportToDate = date.format("YYYY-MM-DD");
    } else {
        var newDate = moment(new Date()).format("YYYY-MM-DD");
        $scope.reportDate = newDate;
        $scope.reportToDate = newDate;
    }
    $scope.statusJob = "";
    if ($scope.statusDetForeman)
        $scope.dailyRecordForeman = $scope.statusDetForeman;
    else
        $scope.dailyRecordForeman = appData.user;

    $scope.showDailyRecordDiv = true;
}
$scope.closeDailyRecordDialog = function () {
    $scope.showDailyRecordDiv = false;
}

This same code is already used by this button:

<button class="md-raised md-primary detailGridAddButton md-button md-ink-ripple" 
        type="button" ng-transclude="" ng-click="AddDailyRecord()">
   <md-icon class="ng-scope material-icons" role="img" aria-label="add">add</md-icon>
   <div class="md-ripple-container" style=""></div>
</button>

This is the md-dialog in question (to show how I toggle show/hide):

<div id="dailyRecordDiv" class="md-dialog-container ng-scope full-height" 
     ng-show="showDailyRecordDiv">
    <md-dialog>
        <md-toolbar>
            ...
        </md-toolbar>
        <md-divider></md-divider>
        <md-dialog-content class="md-dialog-content">
            <form name="dailyRecordform" novalidate>
                ...
            </form>
        </md-dialog-content>
    </md-dialog>
</div>

When I click the button, it correctly displays the dialog. But, when I click the day the code executes, but no dialog. However, if I click the calendar arrows to view another month (prior or next) the dialog is there.

What do I need to do to get it to render on the current calendar?

Answer 1

After running

$scope.AddDailyRecord(date);

Run apply on the scope

$scope.$apply()

The fullCalendar dayClick callback is outside of your controller's scope.