Call date-picker view on custom button click

Question

I use this library for date-picker. I am trying to open date-picker on clicking by custom button. This is my default input and it works fine.

<input name="pickerFromDate" date-time ng-model="model[options.key]" id="pickerFromDate" min-view="month" class="edb-input input-group-input"
 placeholder="{{to.placeholder}}" max-date="maxDate" date-change="changeMinValue" format="MMM DD, YYYY" validation="required"
 watch-direct-changes="true" />

And here is my custom button, by clicking on this button i want to open my calendar view, like i a'm clicking on input.

<button type="button" class="btn btn-default" ng-click="setFocus($event);">
    <i class="fa fa-calendar"></i>
</button>

In my directive-controller I declared this functions

$scope.setFocus = function(data) {
    let input = $(data.target).closest('.cv-form-section').find('input');
    input.click();
};

I find the input, but triggering "click" or "focus" event cause an error.

Error: [$rootScope:inprog] $apply already in progress

Answer 1

1. Import $timeout into your controller head setting
2. Use it:

 $scope.setFocus = function(data) { let input = $(data.target).closest('.cv-form-section').find('input'); $timeout(function(){ input.click(); }) };