title: element.remove doesn't work
body: <p>I'm trying to implement a directive to remove elements from page depending on the user role.</p>
  <p>Here's my <strong>directive</strong> :</p>
  <pre><code>angular.module(&quot;BlurAdmin&quot;)
      .directive('restrict',restrict);
  function restrict (authService, $http, $state){
  return{
      restrict: 'A',
      prioriry: 100000,
      scope: false,
      link: function(){
      },
      compile:  function(element, attr, linker){
          var accessDenied = true;
          
          var attributes = attr.access.split(&quot; &quot;);
          
          var getCurrentUser = function () {
  
                 authService.getCurrentUser()
                      .success(function (data) {
                          var user = data;
                          for(var i in attributes){
                            if(user.roles[0].name == attributes[i]){
                                accessDenied = false;
                            }
                          };
                          if(accessDenied){
                              element.children().remove();
                              element.remove();
                          };
                      })
                      .error(function (data, status) {
                          $state.go(&quot;/login&quot;);
                      });
          };
          getCurrentUser();
      }
  
    }
  }
  </code></pre>
  <p>here's how I access it :</p>
  <pre><code>&lt;input type=&quot;text&quot; id=&quot;title&quot; ng-model=&quot;reunion.title&quot; restrict access=&quot;SUPERCHEF&quot; required&gt;
  </code></pre>
  <p>Everything works Ok but <code>element.remove</code>, it doesn't seem to be doing what it's supposed to be doing.</p>
  <p>Any help would be appreciated.Thank you</p>
  <p><strong>EDIT :</strong> When I do <code>element.text()</code> I'm getting the text inside my element but the element still doesn't get removed.</p>
  <p><strong>BTW</strong> I'm using this <a href="https://github.com/akveo/blur-admin" rel="nofollow noreferrer">front-end framework</a></p>
  <p><strong>EDIT 2 :</strong>
  <em><strong>WEIRD BEHAVIOUR</strong></em></p>
  <p>If I remove the $http call and do it like this :</p>
  <pre><code>angular.module(&quot;BlurAdmin&quot;)
      .directive('restrict',restrict);
  
  function restrict (authService, $http, $state){
  
  
  return{
      restrict: 'A',
      prioriry: 100000,
      scope: true,
      link: function(){
          // alert('ergo sum!');
      },
      compile:  function(element, attr, linker){
          var accessDenied = true;
          
          var attributes = attr.access.split(&quot; &quot;);
          
          console.log(&quot;remove elem&quot;);
          element.children().remove();
         element.remove();
      }
  
    }
  }
  </code></pre>
  <p><strong>---------&gt;</strong> The ELEMENTS ARE GETTING REMOVED.</p>
  <p>but when I add the $http call the elements doesn't get removed.</p>