title: How to check if an element is not in the page anymore?
body: <p>I have defined a directive, which can be used on a button, and if the button is clicked, it will remote some elements from document, the code looks like:</p>
  
  <pre><code>.directive("mydirective", function() {
    return {
       link: function(scope, element) {
          element.bind('click', function() {
             $timeout(function() {
                 angular.element("#aaa").remove();
             }, 1000);
          });
       }
  });
  </code></pre>
  
  <p>Now I want to test it with protractor, the code looks like:</p>
  
  <pre><code>$("#mybutton").click();   // the button has the 'mydirective'
  
  // wait until "#aaa" is removed
  browser.wait(function() {
      var deferred = protractor.promise.defer();
      $("#aaa").isPresent().then(function(data) {       // !!!!
          deferred.fulfill(!data);
      });
      return deferred.promise;
  }, 2000);
  
  // checking
  expect($("#aaa").isPresent()).toBe(false);
  </code></pre>
  
  <p>But when I run the test, it will report:</p>
  
  <pre><code>Error: Locator cannot be empty
  </code></pre>
  
  <p>on the <code>!!!!</code> line in the code.</p>
  
  <p>Why and how to fix it?</p>