Datepicker не привязывается к Angular Model

Question

Я сделал директиву выбора даты, в которой используется уникальная сборщик дат из библиотеки датирования. Он имеет два входных тега и кнопку OK.

Date Picker Library

Single Date Picker Example

Если изменить значение поля ввода с помощью клавиатуры модели получить нужное значение и призывает к серверу иметь место, как и ожидалось. Проблема возникает, когда я использую сборщик дат. Значение модели не изменяется. Он по-прежнему имеет то же значение, которое я установил с клавиатуры.

Но если я запустил document.getElementById('frompicker').value, используя консоль, он покажет мне подходящую дату, которую я установил с помощью datepicker.

Если я не устанавливаю какое-либо значение с клавиатуры и использую только расписание даты, значения моделей не определены.

Я пробовал несколько решений, предложенных для Angle Boostrap UI Datepicker и Angular UI Datepicker. Ни один из них не работает.

Edit после комментария

код можно найти здесь - https://plnkr.co/edit/HzkYzUajGlsZq5KhUwsx

Любая помощь очень ценится :)

Answer 1

Вы должны синхронизировать объем после Datepicker изменения через

$scope.$apply(); 

или

$scope.$evalAsync(); 

кажется это «apply.daterangepicker» событие для DatePicker

Answer 2

Я попытался все методы, упомянутые в различных ответов. Мои коллеги сказали, что неплохо использовать $scope.$evalAsync() или $scope.$apply() без необходимости. Наша база кода не использует digest, compile и тому подобное. Так что это помешало.

Наконец-то я решил обнаружить событие изменения даты, предложенное Валерием Козловым (принятый ответ) и вручную изменить модель.

Я получил доступ к такой дате.

$('#frompicker').val(); // can be done without jQuery as well 

Изменил модель, используя это.

// use Angular's $on to make things consistent if needed 

$('#frompicker').on('apply.daterangepicker', function(ev, picker) { 
    scope.vm.from_date = $('#frompicker').val();     
});