title: Angular doesn't work in IE 8, can't create a custom element for my directives
body: <p>I built my application from scratch for the past few weeks.
  I did it while implementing the instructions <a href="http://docs.angularjs.org/guide/ie" rel="nofollow noreferrer">here</a>.</p>
  
  <p>I have to say that everything works great with any normal browser such as Mozilla or Chrome, and the Angular.js framework has been of much use to me.</p>
  
  <p>The problem is that with IE8, everything seems to be broken, and the document.createElement 
  DOM object throws an errro when I try to create an element for my custome directive(which I'm also using an 'x-' prefix for, as required by this lame excuse of a btowser).</p>
  
  <p>A screen shot:
  <img src="https://i.stack.imgur.com/bTc7n.png" alt="Errros from the explorer development console"></p>
  
  <p>app index:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns:ng="http://angularjs.org" xmlns:x-restrict="" xmlns:x-fileupload="" class="ng-app" ng-app="myApp" ng-controller="homeCtrl"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/foundation.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/form.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/meta.css"&gt;
      &lt;!--[if lte IE 8]&gt;
            &lt;script src="js/json3.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
  
          document.createElement('ng-include');
          document.createElement('ng-pluralize');
          document.createElement('ng-view');
          document.createElement('x-restrict');
          document.createElement('x-fileupload');
          // Optionally these for CSS
          document.createElement('ng:include');
          document.createElement('ng:pluralize');
          document.createElement('ng:view');
        &lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;title&gt;{{model.title}}&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div class="errorBar" ng-show="model.error.visible"&gt;&lt;div class="errorBarContent"&gt;{{model.error.message}}&lt;/div&gt;&lt;/div&gt;
    &lt;div ng-include src="layout.menuSrc"&gt;&lt;/div&gt;
      &lt;div class="colmask threecol"&gt;
        &lt;div class="colmid"&gt;
          &lt;div class="colleft"&gt;
            &lt;div class="col1"&gt;
              &lt;ng-view&gt;&lt;/ng-view&gt;
            &lt;/div&gt;
            &lt;div class="col2"&gt;
              &lt;div ng-include src="layout.leftSideBarSrc"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col3"&gt;
              &lt;div ng-include src="layout.rightSideBarSrc"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt; 
  &lt;!--&lt;div id="mainFrame"&gt;
        &lt;/div&gt; --&gt;
  
        &lt;div ng-include src="layout.footerSrc" id="footer"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- TODO: REMOVE THE CDN JQUERY AND REPLACE IT WITH ONE THAT IS LOCATED WITHIN THE PROJECT --&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular/angular-resource.js"&gt;&lt;/script&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/services.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;script src="js/filters.js"&gt;&lt;/script&gt;
      &lt;script src="js/directives.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bluimp/js/vendor/jquery.ui.widget.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bluimp/js/jquery.iframe-transport.js"&gt;&lt;/script&gt;
       &lt;script src="lib/bluimp/js/jquery.fileupload.js"&gt;&lt;/script&gt;
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>angular.module('myApp.directives', []).
  directive('x-restrict', function(authService){
      return{
          restrict: 'A',
          prioriry: 100000,
          scope: false,
          link: function(){
              // alert('ergo sum!');
          },
          compile:  function(element, attr, linker){
              var accessDenied = true;
              var user = authService.getUser();
              var attributes = attr.access.split(" ");
              for(var i in attributes){
                  if(user.role == attributes[i]){
                      accessDenied = false;
                  }
              }
  
  
              if(accessDenied){
                  element.children().remove();
                  element.remove();           
              }
  
          }
      }
  });
  </code></pre>