Angularjs + kendoui dropdownlist

I have this directive

angular.module('xxx', [
])
    .directive('qnDropdown', [
        '$parse',
        function($parse) {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function(scope, elem, attr, ngModel) {
                    scope.$watch(attr.qnDropdown, function(source) {
                        var model = $parse(attr.ngModel);

                        elem.kendoDropDownList({
                            dataTextField: "Name",
                            dataValueField: "ID",
                            value: attr.value,
                            select: function(e) {
                                var item = this.dataItem(e.item.index());
                                scope.$apply(function() {
                                    model.assign(scope, item.value);
                                });
                            },
                            //template: '<strong>${ data.Name }</strong><p>${ data.ID }</p>',
                            dataSource: source
                        });

                    });
                }
            };
        }]);

Input field is 

<input qn:dropdown="locations" ng:model="installation.LocationID" value="{{installation.LocationID}}" />

EVerything works fine but initial value for kendoDropDownList is not filled (value: attr.value). I suppose I am doing something at wrong place or time but not sure what?

You probably need to use $observe:

Use $observe to observe the value changes of attributes that contain interpolation (e.g. src="{{bar}}"). Not only is this very efficient but it's also the only way to easily get the actual value because during the linking phase the interpolation hasn't been evaluated yet and so the value is at this time set to undefined. -- docs, see section Attributes.

Here's an example where I used $observe recently. See also @asgoth's answer there, where he uses $watch, but he also created an isolate scope.

I'm still not clear on when we need to use $observe vs when we can use $watch.

Are you sure {{installation.LocationID}} has a value you expect? I was able to copy-paste your code with some tweaks for my situation and the dropdownlist is working wonderfully (thank you for doing the hard work for me!). I'm populating value on the input field and when the directive executes, attr.value has it and Kendo shows it as expected. Perhaps this was an Angular issue a couple versions ago?

I had the same problem, the attr.value was empty. The problem was related to an $http async call being made to get the data. The scope data was not yet populated when the dropdownlist was being defined in the directive.

I fixed this by watching attr.ngModel instead of attr.qnDropdown in the link function of the directive. This way the dropdownlist gets defined when the scope data is populated.