Jquery datepicker not open issue in modal

[lbrevity]

I'm using this angularModalService to open dialog (with template url and controller defined) from one of my angular js controller like below :

           ModalService.showModal({
                    templateUrl: 'AddPage.html',
                    scope: $scope.ModelObj,
                    controller: "AddPageController",
                  inputs: {
                        RPA: $scope.lansArray
                    },
                });

and my template code is like ,

`<script type="text/ng-template" id="AddPage.html">

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            
                
                <div class="modal-body">
                    <div class="row">
                        
                        <label>Start Date</label>
                        <div class="input-group date">
                            <input type="text" class="form-control" ng-model="Obj.SeasonStartDate" id="StartDatePicker" name="StartDatePicker" required />
                            <span class="input-group-addon" ng-click="OpenCalender('StartDatePicker')">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
         
        </div>
    </div>
</div>

</script>`

and in model controller , I have function
$scope.OpenCalender = function (id) {
document.getElementById(id).focus();
}

This function is called proper from dialog but it's not open my calendar control.

[dwmkerr]

Is it possible to share a santised gist or something like this? My concern is that it might be a jquery issue rather than an angular modal service issue