Angularjs + kendoui dropdownlist-Collection of common programming errors

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: '${ data.Name }
${ data.ID }

',
                            dataSource: source
                        });

                    });
                }
            };
        }]);

Input field is

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?

1. 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.

2. 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?

Originally posted 2013-11-09 19:44:03.