How to create a datetime-local input DOM with angularjs and Ionic?

I have the following Code that I would like to learn how to refactor out html and place into my Angular controller.

<a class="tab-item ">
    <input type="datetime-local" name="schedule-date-time" id='schedule_input'
        ng-model="scope.schedule"
        ng-change="scope.updateSchedule(scope.schedule)"
        class="icon ion-calendar schedule-picker"
        ng-class='{highlighted:!scope.PublishingService.getPublishNow()}'
        placeholder="yyyy-MM-ddTHH:mm" />

</a>

I would like to add some conditional logic, to trigger a warning modal before the datetime input is opened. In my attempts, when I attach a controller scope function to the above HTML ng-focus or ng-click, the datepicker input is opened first. This is not the functionality I desire. How can I create the datetime-local input dom using angular, and open it from my angularjs controller?

In my design, I would remove the input above, and bind the below function to the using ng-click. I would like that ng-click to warn the user, then call a subsequent function to create the input and open it. I have Something like this in mind:

    $scope.DetermineIfIShouldWarnUser = function() {
        if($scope.return_path == '/editpost'){
            $scope.warnUser(' TRIGGER MODAL POPUP ', $scope.functionToOpenCalandarDOM);
        }else{
            $scope.functionToOpenCalandarDOM();
        }
    };

$scope.functionToOpenCalandarDOM() {


// HOW CAN I REFACTOR THE CALENDAR DOM OUT OF THE HTML and load it and open it from here?

}