selenium - Finding element by ID is not working in protractor -

When I find an element with ID then it is not working in my code.

- This is the HTML where 4 tabs are visible. Under each option avi option is available. Each of the 4 tabs has IDs but identifying using those people is not working.

HTML:

  & lt; Nav id = "monitoring-tab" class = "pure-menu pure-menu-open pure-menu horizontal ng-scope" & gt; & Lt; Ul & gt; & Lt; Li id = "now-tab" ui-sref-active = "pure-menu-selected" ng-hide = "hide tab.Now" class = "ng-hide" gt; & Lt; A ui-sref = "app.monitoring.real-time" href = "# / monitoring / real time" & gt; Now & lt; / A & gt; & Lt; / Li & gt; & Lt; Li id = "day-tab" ui-sref-active = "pure-menu-selected" class = "pure-menu-selected" & gt; & Lt; A ui-sref = "app.monitoring.historical.day" href = "# / monitoring / historical / day" & gt; Day & lt; / A & gt; & Lt; / Li & gt; & Lt; Li id = "month-tab" ui-sref-active = "pure-menu-selected" & gt; & Lt; A ui-sref = "app.monitoring.historical.month" href = "# / monitoring / historical / month" & gt; Month & lt; / A & gt; & Lt; / Li & gt; & Lt; Li id = "year-tab" ui-sref-active = "pure-menu-selected" & gt; & Lt; A ui-sref = "app.monitoring.historical.year" href = "# / monitoring / historical / year" & gt; Year & lt; / A & gt; & Lt; / Li & gt; & Lt; Li id = "Lifetime-tab" ui-sref-active = "pure-menu-selected" & gt; & Lt; A ui-sref = "app.monitoring.historical.lifetime" href = "# / monitoring / historical / lifetime" & gt; Lifetime & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt; & Lt; Div id = "date-range" ng-hide = "stateName == 'App monitoring. Historical lifetime'" class = "ng-scope" & gt; & Lt; Period & gt; & Lt; An id = "historical-nav-prev" ui-sref = "app.monitoring.historical.day ({date: '2014-10-16'})" href = "# / monitoring / historical / day? Date = 2014 -10-16 "& gt; & Lt; I class = "fa-chevron-left" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Span & gt; & Lt; Span class = "ng-binding" & gt; Venus, October 17, 2014 & lt; / Span & gt; & Lt; Span ng-show = "historicalNav.nextDateBtnShown" class = "ng-hide" & gt; & Lt; A id = "historical-nav-next" ui-sref = "app.monitoring.historical.day ({date: ''})" href = "# / monitoring / historical / day? Date =" & gt; & Lt; I class = "fa-chevron-right" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Span & gt; & Lt; / Div & gt;  

MyCode:

  This should be clicked on 'Last day', function () {element (by.id ('historical-nav-prev ')). Click ();});  

Error:

  NoSuchElementError: No elements found using the property: By.id ("historic-nav-pr")  

What's wrong here? I'm using most of the IDs.