how to locate dynamic elements in `protractor`
<p>I get this error when I try to run the code below:</p>

<blockquote>
  <p>Failed: element not visible</p>
</blockquote>

<p>Following is the html code for the elements I want to locate:</p>

<pre><code>&lt;a class="dropdown-toggle ng-binding ng-scope" aria-expanded="false"    
role="button" href="/" data-toggle="dropdown" ng-if="tab.subtabs"&gt;
Content
&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;ul class="dropdown-menu ng-scope" role="menu" ng-if="tab.subtabs"&gt;
&lt;li class="ng-scope" ng-repeat="test in tab.subtabs"&gt;
&lt;a class="ng-binding" target="_self" href="/custom/ui"&gt;Custom&lt;/a&gt;
&lt;/li&gt;
&lt;li class="ng-scope" ng-repeat="test in tab.subtabs"&gt;
&lt;a class="ng-binding" target="_self" href="/patch/ui"&gt;Patch&lt;/a&gt;&lt;/li&gt;
&lt;li class="ng-scope" ng-repeat="test in tab.subtabs"&gt;
&lt;a class="ng-binding" target="_self" href="/swd/ui"&gt;Software&lt;/a&gt;
</code></pre>

<p>I want to click on element within the tags: </p>

<pre><code>&lt;a class="ng-binding" target="_self" href="/custom/ui"&gt;Custom&lt;/a&gt;
&lt;a class="ng-binding" target="_self" href="/patch/ui"&gt;Patch&lt;/a&gt;
&lt;a class="ng-binding" target="_self" href="/swd/ui"&gt;Software&lt;/a&gt;
</code></pre>

<p>I have tried following code in <code>protractor</code>, but it is not working:</p>

<pre><code>it("should click on Content and then custom", function(){
    element(by.xpath('/html/body/bf-header/div/nav/div/div/div[2]/ul[1]  
   /li[2]/a')).element(by.xpath('/html/body/bf-header/div/nav/div/div   
   /div[2]/ul[1]/li[3]/ul/li[1]')).click();
</code></pre>