How to update jquery plugin inside angular directive

Question

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