Here's what I did. This is my timepicker directive:
.directive('timePicker', ['$timeout', function ($timeout) {
return {
restrict: 'AC',
scope: {
ngModel: '='
},
link: function (scope, element) {
element.on('change', function () {
if (element.hasClass('start')) {
$timeout(function () {
var $el = element.closest('[date-pair]').find('input.end'),
endScope = angular.element($el).isolateScope();
endScope.$apply(function () {
endScope.ngModel = $el.val();
});
}, 0);
}
});
element.timepicker({
timeFormat: 'H:i',
forceRoundTime: true
});
}
};
}]);
And my datePair directive is pretty similar to yours:
.directive('datePair', [function () {
restrict: 'AC',
link: function (scope, element) {
element.datepair();
}
}]);
Your HTML could look something like this:
<div date-pair>
<input time-picker class="time start" ng-model="something.start">
<input time-picker class="time end" ng-model="something.end">
</div>
You could still use your date-pair directive, but do note that I added a hyphen in my attribute.
What happens is that when the change
event is triggered in a start timePicker, it'll update the scope for the end timePicker to reflect the change made by the jQuery plugin.
It's not too fast though, it usually updates within a second (less than a second most of the time)