title: AngularJS Error: element is undefined (caused by "undefined")
body: <p>I have this directive to create a dropdown dynamically, but when it renders on the page, in Firefox and IE 11 I get the below exceptions:</p>
  
  <p>Firefox exceptiton:</p>
  
  <pre><code>"Error: element is undefined (caused by "undefined")
  getAliasedAttrName@http://localhost:63342/inventory-client/bower_components/angular/angular.js:3056:7
  $CompileProvider/this.$get&lt;/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&lt;/Scope.prototype.$digest@http://localhost:63342/inventory-client/bower_components/angular/angular.js:15683:23
  $RootScopeProvider/this.$get&lt;/Scope.prototype.$apply@http://localhost:63342/inventory-client/bower_components/angular/angular.js:15951:13
  ngEventHandler/&lt;@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
  </code></pre>
  
  <p>IE 11 exception:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Below is the angualrjs directive code along with html:</p>
  
  <pre><code>module.directive('bootstrapDropdown', ['$compile', '$timeout', function ($compile, $timeout) {
          return {
              restrict: 'E',
              require: '^ngModel',
              scope: {
                  ngModel: '=',
                  items: '=',
                  callback: '&amp;',
                  placeholder: '@'
              },
              link: function (scope, element) {
                  scope.$evalAsync(function (scope) {
                      scope.selectVal = function (item) {
                          scope.ngModel = item;
                          $('button.dropdown-toggle', element).html(item.name + ' &lt;span class="caret"&gt;&lt;/span&gt;');
  
                          if (scope.callback) {
                              scope.callback({item: item});
                          }
                      };
  
                      var html = '';
                      html += '&lt;div class="form-item dropdown"&gt;';
                      html += '   &lt;button class="dropdown-select dropdown-toggle" type="button" data-toggle="dropdown" &gt;';
                      html += '       {{placeholder}}&lt;span class="caret"&gt;&lt;/span&gt;';
                      html += '   &lt;/button&gt;';
                      html += '   &lt;ul class="dropdown-menu" role="menu"&gt;';
                      html += '       &lt;li role="presentation" data-ng-repeat="item in items"&gt;&lt;a data-ng-href="" role="menuitem" tabindex="-1" data-ng-click="selectVal(item)"&gt;{{item.name}}&lt;/a&gt;&lt;/li&gt;';
                      html += '   &lt;/ul&gt;';
                      html += '&lt;/div&gt;';
  
                      element.append($compile(html)(scope));
                  });
              }
          };
      }]);
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;bootstrap-dropdown id="dropdownCondition{{$index}}"
                                                                              ng-model="inventory.condition"
                                                                              items="getGroups('conditions', $index)"
                                                                              ng-init="inventory.condition.name='AND'"
                                                                              placeholder="AND"&gt;
                                                          &lt;/bootstrap-dropdown&gt;
  </code></pre>