Angularjs two directives on one textbox - angularjs

Question

I have two directives in a single textbox. One is datetimepicker and focus directive.
DateTimePicker :
app.directive('datetimepicker', function() {
return {
restrict: 'A',
require : '?ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
element.datetimepicker({
format: "yyyy-mm-dd hh:ii:ss",
autoclose: true,
todayBtn: true
}).on('setDate', function(e) {
ngModelCtrl.$setViewValue(e.date);
scope.$apply();
});
}
};
});
Focus :
app.directive('focus',function($timeout) {
return {
restrict: 'A',
scope : {
trigger : '#focus'
},
link : function(scope, elem,attrs) {
var focusables = $(":focusable");
scope.$watch('trigger', function(value) {
if (value === "true") {
$timeout(function() {
elem[0].focus();
});
}
});
elem.bind('keydown', function(e) {
var code = e.keyCode || e.which;
if (code === 13) {
var current = focusables.index(this);
var next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
next.focus();
e.preventDefault();
}
});
}
};
});
This is my textbox
<input datetimepicker ng-model='dob' focus/>
I am getting the below error
Error: [$compile:multidir] Multiple directives [focus, datepicker] asking for new/isolated scope on: <input datepicker="" ng-model="dob" focus="">
How to make these two directives work together in a textbox?

Answer 1

Try not to provide isolate scope manually to first directive because you don't need that so use scope:false, it will work so.
app.directive('datetimepicker', function() {
return {
restrict: 'A',
require : '?ngModel',
scope: false,
link: function(scope, element, attrs, ngModelCtrl) {
element.datetimepicker({
format: "yyyy-mm-dd hh:ii:ss",
autoclose: true,
todayBtn: true
}).on('setDate', function(e) {
ngModelCtrl.$setViewValue(e.date);
scope.$apply();
});
}
};
});

Answer 2

The problem you're getting is when at least two directives require new or isolated scopes.
As far as I can tell, your focus directive does not actually require isolated scope, as you can achieve focus using attrs.trigger.
Try to change your focus directive to:
app.directive('focus',function($timeout) {
return {
restrict: 'A',
link : function(scope, elem,attrs) {
var focusables = $(":focusable");
scope.$watch(attrs.trigger, function(value) {
if (value === "true") {
$timeout(function() {
elem[0].focus();
});
}
});
elem.bind('keydown', function(e) {
var code = e.keyCode || e.which;
if (code === 13) {
var current = focusables.index(this);
var next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
next.focus();
e.preventDefault();
}
});
}
};
});