Bootstrap's Datepicker not opening inside Angular ng-show

Question

In my Angular app I have a datepicker input hidden inside an accordion style ng-show directive, structured like so:

<div class="col-sm-9" ng-show="editDates">
    <div class="row">
        <div class="col-xs-6">
            <div class="input-group" id="startDatePicker">
                <input type='text' class="form-control" id="projectStartDate" name="projectStartDate" ng-model="proj.project.startDateFormatted" placeholder="Project Start Date" />
                <span class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </span>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="input-group" id="endDatePicker">
                <input type='text' class="form-control" id="projectEndDate" name="projectEndDate" ng-model="proj.project.endDateFormatted" placeholder="Project End Date" />
                <span class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </span>
            </div>
        </div>
    </div>
    <md-button class="md-primary" ng-click="proj.putProject(); editDates = !editDates;">Save</md-button>
    <md-button class="md-hollow" ng-click="editDates = false">Cancel</md-button>
</div>

And in my project controller:

$('#startDatePicker').datetimepicker({format: 'DD/MM/YY'}).on('dp.change', function (e) {
    proj.project.startDateFormatted = e.date.format('DD/MM/YY');
    proj.project.startDate = e.date.unix();
})

$('#endDatePicker').datetimepicker({format: 'DD/MM/YY'}).on('dp.change', function (e) {
    proj.project.endDateFormatted = e.date.format('DD/MM/YY');
    proj.project.endDate = e.date.unix();
});

The problem is, even though this was working fine before I put my datepickers inside the ng-show directive, now the calendar popup simply won't open.

How can I fix this?