value - Apply kendo dropdownlist style only on angular select

kendo-dropdownlist angular 6 (2)

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

The code in the controller may look like such:

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

The directive will the appear as such:

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

The given select would appear as such:

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

I have a select which is being populated using angular binding.

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

Now i want to apply the Kendo dropdownlist style on this select , but i don't want to populate the options using kendo datasource etc and continue to do that using angular.

If i use $('#optBuckets').kendoDropDownList() then i get the requiired style applied but the binding data is lost.

Any help in order to resolve that is highly appreciated.

Kendo dropdown with ng-options instead of DataSource

The is because the kendo-drop-down-list directive acts on the element before ng-options gets a chance to populate it with the <option> elements that the dropdown widget needs. The same problem occurs when using kendo widgets on something that has ng-repeat elements.

Unfortunately kendo's integration with Angular is incomplete and hackish in many ways, so half-workarounds are to delay creating the dropdown until a controller variable is available, or rebuild the dropdown when a controller variable changes.

None of these options are really optimal. The first option doesn't help with refreshing the list of options when the controller variables changes and rebuilding the widget could mean losing the ng-model binding among other things.

It's a limitation of the approach they've chosen to use for integrating with Angular and one of those things not really worth the fuss of trying to hack around. Just go with their recommended approach of using data sources.

I'd also encourage not fluffing up select elements since many browsers these days have native handling for them, especially on mobile devices.