Apply kendo dropdown style only on angular select

I have a selection that is populated with an angular binding.

<select class = 'clsBucket' id = 'optBuckets' ng-options = 'opt as to select in buckets' ng-model = 'bucketSelected' ng-change = 'changeBucket ()'>

Now I want to apply the Kendo dropdownlist style for this selection, but I don't want to populate the options with kendo datasource etc. and keep doing it with angular.

If I use $ ('# optBuckets'). kendoDropDownList (), then I get the style I want, but the binding data is lost.

Any help to fix this issue is greatly appreciated.


source to share

1 answer

The above code lists "buckets" as the data source. With this in mind, a promise that assigns "buckets" to scope should secure it. From there the directive can access it (called "bucketsPromise" here)

The code in the controller might look like this:

$scope.bucketsPromise = bucketsService.get().then(function(data) {
  $scope.buckets = data;


The directive will appear as such:

.directive('angularToKendoDropdown', function() {
  return {
    scope: {
      'bindToCtrl': '&dataSourcePromise'
    link: function(scope, element, attr) {
        scope.bindToCtrl.then(function() {


This choice will look like this:

<select class='clsBucket angular-to-kendo-dropdown' id='optBuckets'
        ng-options='opt as for opt in buckets'
        ng-model='bucketSelected' ng-change='changeBucket()'




All Articles