title: protractor StaleElementReferenceError: Element is no longer attached to the DOM
body: <p>In my Angular app, when a user opens a page we initially load cached content and then follow it up with asynchronous calls to the server to poll the actual data and update the page.  I am trying to access element which is already displayed, but the pointer for the element has changed because page content was updated, even though nothing on that specific element has actually changed. </p>
  
  <p>I tried different solutions, but still cant make it as stable as I want. I need something like try/catch blocks, because I do not want to to use browser.wait.</p>
  
  <p>From the description looks like </p>
  
  <pre><code>browser.waitForAngular(); 
  </code></pre>
  
  <p>should handle $http calls, but it did not help.</p>
  
  <p>Here is a code sample:</p>
  
  <pre><code>    element(by.id('closeEditTagsModal')).click();
      helper.waitElementToDisappear(element(by.css('body[class$="modal-open"]')));
      element(by.id('myBookingsTab')).click();
      helper.waitElementToDisappear(element(by.css('body[class$="loading"]')));
      try {
             (helper.waitElementToBeShown(element(by.repeater('b in currentbookings').row(0)).element(by.cssContainingText('.tagPill', 'TestTag')))).then(function() {
          }, function(err) {
              console.log('element was not found');
              throw err;
          });
      }
      catch (err) {
          helper.waitElementToBeShown(element(by.repeater('b in currentbookings').row(0)).element(by.cssContainingText('.tagPill', 'TestTag')));
      }
  </code></pre>
  
  <p>Here is another sample where I tried to use try/catch, but looks like I did something wrong. I have this error in the try block:</p>
  
  <blockquote>
    <p>StaleElementReferenceError: Element is no longer attached to the DOM</p>
  </blockquote>
  
  <p>The code for my help function:</p>
  
  <pre><code>var waitElementToBeShown = function (elm) {
  browser.wait(function () {
      return elm.isPresent();
  },10000);
  browser.wait(function () {
      return elm.isDisplayed();
  },10000);
  };
  </code></pre>
  
  <p>I am trying to wait for the element to be available to be interacted with.</p>