title: Protractor clicking on the link, but element is not visible?
body: <p>Hu guys,</p>
  
  <p>I have a problem when I want to click on a link that is in list on html page. Here is my html:</p>
  
  <pre><code>&lt;h3&gt;{{snapshot.contractKey}}&amp;nbsp;&lt;/h3&gt;
      &lt;ul class="nav nav-pills nav-stacked"&gt;
                  &lt;li&gt;&lt;a id="documentLink" href="" ng-click="checkAndRedirect('/document1/')"&gt;&lt;span translate="contractDetail.document1"&gt; Document&lt;/span&gt;&amp;nbsp;&lt;i class="fa fa-file-text"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="active"&gt;&lt;a id="detailsLink" href="" ng-click="checkAndRedirect('/document2/')"&gt; &lt;span translate="contractDetail.document2"&gt; Details&lt;/span&gt;&amp;nbsp;&lt;i class="fa fa-list-ul"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a id="revisionsLink" href="" ng-click="checkAndRedirect('/document3/')"&gt; &lt;span translate="contractDetail.document3"&gt; Revisions &lt;/span&gt;&amp;nbsp;&lt;i class="fa fa-exchange"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a id="auditTrailLink" href="" ng-click="checkAndRedirect('/document4/')"&gt; &lt;span translate="contractDetail.document4"&gt; Audit Trail&lt;/span&gt;&amp;nbsp;&lt;i class="fa fa-tasks"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a id="actionHistoryLink" href="" ng-click="checkAndRedirect('/document5/')"&gt; &lt;span translate="contractDetail.document5"&gt;Action History &lt;/span&gt;&amp;nbsp;&lt;i class="fa fa-clock-o"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
  </code></pre>
  
  <p>When I want to click on a link by its ID in protractor test, error is shown <strong>No such element</strong> or <strong>Element is not visible.</strong></p>
  
  <p>Here is my test line of code:</p>
  
  <pre><code>element(by.id('documentLink')).click();
  </code></pre>
  
  <p>Do you know why it is bad solution and what do to? </p>
  
  <p>When I do this:</p>
  
  <pre><code>element.all(by.tagName('a')).then(function(results){ 
          expect(results.length).toEqual(5);
    });
  </code></pre>
  
  <p>he returns me that is correct and there are 5 links on page. But when I try to access them by ID, I can not do that?</p>