title: Protractor - exiting nested for loop if element.getAttribute('class') changes
body: <p>I am new to protractor, javascript, and async programming in general. I'm having trouble with exiting nested for loops once I've found that a specific element on the page has changed it's class.</p>
  
  <p>Unfortunately I have a flash object on the page I'm automating that I must interact with. I'm using direct mouseMoves and clicks to do so, which I've found is satisfactory.  I want to click in a 10x10 grid pattern until I click on something in the grid that will change the class of another element on the page. Here is my code:</p>
  
  <pre><code>var selectSeat = function() {
    var xCoord = 157;
    var yCoord = 57;
    var breakLoop = false;
    for (var i=0; i&lt;10; i++) {
      for (var j=0; j&lt;10; j++) {
        browser.actions().mouseMove(flashElement, {x: xCoord+(15*i), y: yCoord+(15*j)}).click().perform();
        browser.sleep(500);
        buttonElement.getAttribute('class').then(function(attribute) {
          if(attribute === 'black-button') {
            breakLoop = true;
          }
        })
        if (breakLoop) {
          return;
        }
        }
      }
  };
  </code></pre>
  
  <p>I have logged the values of attribute and breakLoop to the console to make sure they were changing as expected, and they are. The problem comes from the 'if (breakLoop) { return; }' block not running, even when breakLoop is true.
  I know this has issues due to the asynchronous nature of protractor, but after hours of searching and trying solutions, I can't seem to figure out what my correct solution is.</p>