I am using jquery plugin "ddslick" for my application. I have created an angular directive for this jquery plugin. I also have a dropdown showing list of languages. So basically on change of language, the options inside dropdown list should also be translated as per the selected language. On the page load, this is working fine but once I change the language, it is not translating into the selected language. My directive code block
 
 
hotelierApp.directive('ddslick', function ($compile, $templateCache, $window, $translate, UserFactory) {
return {
restrict: 'A',
scope: {
selectText: '@selectText',
showSelectedHtml: '@showSelectedHtml',
ddlData: '@ddlData',
langId: '='
},
link: function (scope, element, attrs) {
var ddlData = JSON.parse(scope.ddlData);
scope.$watch('langId', function () {
var lim = ddlData.length;
for (var i = 0; i < lim; i++) {
var abc = ddlData[i].StreetAddress;
var def;
(function () {
var j = i;
UserFactory.getdatacategorydetailtranslations(2, abc, scope.langId)
.then(function (data) {
if(data.datacategorydetailtranslations)
ddlData[j].StreetAddressDetail = data.datacategorydetailtranslations;
}, function (error) { });
})();
}
setTimeout(function () {
$(element).ddslick({
data: ddlData,
width: '100%',
selectText: scope.selectText,
imagePosition: "left",
showSelectedHTML: scope.showSelectedHtml === 'true',
ddoptionswidth: 410,
onSelected: function (selectedData) {
//alert(selectedData.selectedData.value);
}
});
}, 5000);
});
}
}
});
 
 
Even my SelectText (default text for dropdown) is not updating as per the selected language. I tried $compile and even Scope.apply, but both of these are not working or may be I am doing it in wrong manner. Please help