AngularJS错误：元素未定义（由“undefined”引起）

Question

我有这个指令动态创建一个下拉列表，但是当它在页面上呈现时，在Firefox和IE 11中，我得到以下例外：

Firefox除外：

"Error: element is undefined (caused by "undefined")
getAliasedAttrName@http://localhost:63342/inventory-client/bower_components/angular/angular.js:3056:7
$CompileProvider/this.$get</Attributes.prototype.$set@http://localhost:63342/inventory-client/bower_components/angular/angular.js:7179:26
interpolateFnWatchAction@http://localhost:63342/inventory-client/bower_components/angular/angular.js:8547:23
interpolateFnWatcher@http://localhost:63342/inventory-client/bower_components/angular/angular.js:10874:17
watchGroupAction@http://localhost:63342/inventory-client/bower_components/angular/angular.js:15355:13
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:63342/inventory-client/bower_components/angular/angular.js:15683:23
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:63342/inventory-client/bower_components/angular/angular.js:15951:13
ngEventHandler/<@http://localhost:63342/inventory-client/bower_components/angular/angular.js:23303:17
jQuery.event.dispatch@http://localhost:63342/inventory-client/bower_components/jquery/dist/jquery.js:4434:15
jQuery.event.add/elemData.handle@http://localhost:63342/inventory-client/bower_components/jquery/dist/jquery.js:4121:6
invoke@http://localhost:63342/inventory-client/bower_components/webcomponentsjs/webcomponents.js:1090:55
dispatchAtTarget@http://localhost:63342/inventory-client/bower_components/webcomponentsjs/webcomponents.js:1039:14
dispatchEvent@http://localhost:63342/inventory-client/bower_components/webcomponentsjs/webcomponents.js:1017:13
dispatchOriginalEvent@http://localhost:63342/inventory-client/bower_components/webcomponentsjs/webcomponents.js:973:1
" undefined

IE 11例外：

TypeError: Unable to get property 'nodeName' of undefined or null reference (caused by "undefined")
   at getAliasedAttrName (http://localhost:63342/inventory-client/bower_components/angular/angular.js:3056:3)
   at Attributes.prototype.$set (http://localhost:63342/inventory-client/bower_components/angular/angular.js:7179:13)
   at interpolateFnWatchAction (http://localhost:63342/inventory-client/bower_components/angular/angular.js:8547:23)
   at interpolateFnWatcher (http://localhost:63342/inventory-client/bower_components/angular/angular.js:10874:17)
   at watchGroupAction (http://localhost:63342/inventory-client/bower_components/angular/angular.js:15355:13)
   at Scope.prototype.$digest (http://localhost:63342/inventory-client/bower_components/angular/angular.js:15683:23)
   at Scope.prototype.$apply (http://localhost:63342/inventory-client/bower_components/angular/angular.js:15951:13)
   at Anonymous function (http://localhost:63342/inventory-client/bower_components/angular/angular.js:23303:17)
   at jQue

下面是angualrjs指令代码以及html：

module.directive('bootstrapDropdown', ['$compile', '$timeout', function ($compile, $timeout) {
        return {
            restrict: 'E',
            require: '^ngModel',
            scope: {
                ngModel: '=',
                items: '=',
                callback: '&',
                placeholder: '@'
            },
            link: function (scope, element) {
                scope.$evalAsync(function (scope) {
                    scope.selectVal = function (item) {
                        scope.ngModel = item;
                        $('button.dropdown-toggle', element).html(item.name + ' <span class="caret"></span>');

                        if (scope.callback) {
                            scope.callback({item: item});
                        }
                    };

                    var html = '';
                    html += '<div class="form-item dropdown">';
                    html += '   <button class="dropdown-select dropdown-toggle" type="button" data-toggle="dropdown" >';
                    html += '       {{placeholder}}<span class="caret"></span>';
                    html += '   </button>';
                    html += '   <ul class="dropdown-menu" role="menu">';
                    html += '       <li role="presentation" data-ng-repeat="item in items"><a data-ng-href="" role="menuitem" tabindex="-1" data-ng-click="selectVal(item)">{{item.name}}</a></li>';
                    html += '   </ul>';
                    html += '</div>';

                    element.append($compile(html)(scope));
                });
            }
        };
    }]);

HTML：

<bootstrap-dropdown id="dropdownCondition{{$index}}"
                                                                            ng-model="inventory.condition"
                                                                            items="getGroups('conditions', $index)"
                                                                            ng-init="inventory.condition.name='AND'"
                                                                            placeholder="AND">
                                                        </bootstrap-dropdown>