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

我有这个指令来动态创建一个下拉列表，但当它在页面上呈现时，在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

以下是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:

---

如果可以的话，就用它。它是有效的，并且有很好的文档记录。scope.$evalAsyncfunction scope我自己就知道了，指令工作得很好，是HTML页面中的代码使用了ng开关并导致了问题，一旦我用ng移除了ng开关，它就工作得很好。

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));
                });
            }
        };
    }]);

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