title: Selecting a element in a drop-down menu in protractor
body: <p>I have a drop-down menu on my page. My goal for protractor testing is to click one of the options of this drop-down menu and have protractor check the results:</p>
  
  <pre><code>&lt;ul class="dropdown"&gt;
    &lt;li class="nav-header"&gt;portfolio&lt;/li&gt;
    &lt;li class="divider"&gt;&lt;/li&gt;
    &lt;li class="dropdown-submenu"&gt; ... &lt;/li&gt;
  
  
     &lt;li ng-repeat="p in user.portfolios"&gt;
      &lt;!-- this is the option we will click for our testing --&gt;
      &lt;a href ng-click="displayPortfolio(p)&gt;Portfolio 1  &lt;/a&gt;
     &lt;/li&gt;
  
     &lt;li ng-repeat="p in user.portfolios"&gt;
      &lt;a href ng-click="displayPortfolio(p)&gt;Portfolio 2  &lt;/a&gt;
     &lt;/li&gt;  
  
     &lt;li ng-repeat="p in user.portfolios"&gt;
      &lt;a href ng-click="displayPortfolio(p)&gt;Portfolio 3  &lt;/a&gt;
     &lt;/li&gt;  
  
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>my protractor test looks something like:</p>
  
  <pre><code>it('should display relevant portfolio when clicked',function(){
  
      ptor.ignoreSynchronization = true;  
      element.all(by.xpath("//a[@ng-click='displayPortfolio(p)'])).then(function(list){
        list[0].click();
        expect(... some assertion here);
  
      });
      ptor.ignoreSynchronization = false;  
  }
  </code></pre>
  
  <p>Just in case you were wondering, ptor.ignoreSynchronization is enabled because my web-page is constantly polling the backend for some updates.</p>
  
  <p>Protractor throw the following error when I run the test:</p>
  
  <pre><code>ElementNotVisisbleError: element not visible
  </code></pre>
  
  <p>I don't quiet understand what this error is about. The element is surely visible since when I do view source of the page, I can see it in the DOM structure. </p>
  
  <p>Kindly advice</p>