How do I get protractor to click my button? I keep getting an element is not visible [duplicate]

Question

I have the following markup, and I am trying to access the <button />

<ul class="flower-list">
  <li ng-repeat="flower in model.flowers">
    <img ng-src="flower.imgUrl">
    <button ng-click="model.addToFlowerPot(flower)">Add</button>
  </li>
</ul>

I have the following:

var flower = element.all(by.repeater('flower in model.flower')).first();
var addButton = flower.element(by.buttonText("Add"));
addButton.click();

Answer 1

Check if there is a delay if the data is coming from service. You can wait until you get the data with

browser.waitForAngular()