Protractor-Not able to select item from drop down - protractor

Question

I am trying to select item from drop down using the code:
var assettype= element(by.model("templateIdTracker"));
if (assettype.isDisplayed()) {
assettype.click();
}
browser.sleep(1000);
element(by.cssContainingText('option', 'A')).click();
I can click the drop down but on trying to select item, it throws error:
"Failed: element not visible: Element is not currently visible and may
not be manipulated"
This is the web page code. Please suggest.
<div class="k-list-container k-popup k-group k-reset k-state-border-up" data-role="popup" style="position: absolute; font-size: 14px; font-family: "Open Sans Light","Helvetica Neue",Helvetica,Arial,sans-serif; font-stretch: normal; font-style: normal; font-weight: 400; line-height: 20px; width: 243.5px; height: auto; display: block; transform: translateY(0px);">
<div class="k-list-optionlabel ng-scope"/>
<div class="k-group-header" style="display:none"/>
<div class="k-list-scroller" unselectable="on" style="height: auto;">
<ul class="k-list k-reset" unselectable="on" tabindex="-1" aria-hidden="false" aria-live="off" data-role="staticlist" role="listbox">
<li class="k-item ng-scope k-state-hover" data-offset-index="0" unselectable="on" role="option" tabindex="-1">A</li>
<li id="1ebaaa3b-8f44-4873-b478-fea6fd498b83" class="k-item ng-scope k-state-selected k-state-focused" data-offset-index="1" unselectable="on" role="option" tabindex="-1">B</li>
<li class="k-item ng-scope" data-offset-index="2" unselectable="on" role="option" tabindex="-1">C</li>
<li class="k-item ng-scope" data-offset-index="3" unselectable="on" role="option" tabindex="-1">D</li>
<li class="k-item ng-scope" data-offset-index="4" unselectable="on" role="option" tabindex="-1">E</li>
<li class="k-item ng-scope" data-offset-index="5" unselectable="on" role="option" tabindex="-1">F</li>
<li class="k-item ng-scope" data-offset-index="6" unselectable="on" role="option" tabindex="-1">G</li>
</ul>
</div>
</div>
</div>
</div>

Answer 1

You could implement helper method to wait for this element to be visible.
Helpers.expectVisible = function (elementLocator, elementDescription) {
var message = null;
if (elementDescription) {
message = elementDescription + ' was not visible';
}
return browser.wait(EC.visibilityOf(elementLocator), WAIT_TIMEOUT, message);
};

Answer 2

you can also try:
assettype.click();
element(by.linkText("A")).click();

Answer 3

The problem is your browser can't see the element, its probably on the bottom of the screen.
You can use the same solution to any element you cant see.
Check my answer here https://stackoverflow.com/a/39074330/1431062

Answer 4

Thanks all!
It simply worked by using 'li' instead of 'option'
element(by.cssContainingText('li', 'A')).click();
instead of element(by.cssContainingText('option', 'A')).click();
assettype= element(by.model("templateIdTracker"));
assettype.click();
browser.sleep(1000);
element(by.cssContainingText('li', 'A')).click();
browser.sleep(2000);