title: Browser.wait() until .getAttribute() returns true
body: <p>I'm still learning Protractor so I'm not sure if this is a simple answer that I'm not getting but I'm just trying to have the browser wait until the attribute I'm retrieving is true.</p>
  
  <p>I'm testing the pizza option for <a href="https://material.angularjs.org/latest/#/demo/material.components.select" rel="nofollow">this site</a>.</p>
  
  <p>Complete code:</p>
  
  <pre><code>browser.get('https://material.angularjs.org/latest/#/demo/material.components.select');
  
  var topping = element(by.model('topping'));
  
  topping.click();
  
  browser.wait(function() {
      return topping.getAttribute('aria-expanded').then(function(value) {
          return value == 'true';
      });
  }, 5000);
  
  var toppingOptions = element.all(by.css('[role="option"]'));
  
  toppingOptions.get(5).click();
  
  expect(topping.getText()).toBe('Onion');
  </code></pre>
  
  <p>This gives me the error:</p>
  
  <blockquote>
    <p>Element is not clickable at point (436, 693). Other element would receive the click: <code>&lt;md-backdrop class="md-select-backdrop md-click-catcher md-default-theme"&gt;&lt;/md-backdrop&gt;</code></p>
  </blockquote>
  
  <p>One more note, if I put <code>browser.sleep(1000);</code> after <code>topping.click()</code> and before <code>browser.wait()</code> then the test passes. So I know the rest of the test isn't what's failing. For some reason the call to wait isn't working.</p>
  
  <p>I'm thinking it might have something to do with the fact that the option I'm trying to click is not technically visible when <code>topping</code> is clicked because it's in a ComboBox with a scroll element. If anyone knows a good way to simulate scrolling to the "onion" element it would be much appreciated as well.</p>