Protractor: Wait for Element to be visible /displayed is not working

HTML:
<ul>
<div class="maintitleContainer">
<div class="maintitle">Caller ID Numbers</div>
<div style="position: absolute; top:8px; right:0px;">

I am trying to wait for text "Caller ID Number" to be present or displayed. Any HELP is appreciated !

Code:

TRY1:

Common.prototype.TitleContain=function () {
    browser.driver.ignoreSynchronization = true;
        browser.waitForAngularEnabled(false);
        var EC= protractor.ExpectedConditions;

 browser.wait(EC.textToBePresentInElement($('#maintitle'),'Caller ID Numbers'), 20000, 'No!');

}

Error: Failed No!

Try 2:

AngularPgCommon.prototype.TitleContain=function () {
        browser.driver.ignoreSynchronization = true;
        browser.waitForAngularEnabled(false);
 browser.wait(function() {
            return browser.findElement(by.xpath('.//*[@class="maintitle"]'))
                .then(function(elem) {
                    elem.isDisplayed();
                    return true;
                });
        }, 20000);
    };

Error: Failed: No element found using locator: By(xpath, .//*[@class="maintitle"])

Try 3:

    Common.prototype.TitleContain=function () {

browser.wait(function() {
            return element(by.className('maintitle')).isDisplayed();
        }, 20000);
}

Error:

No element found using locator: By(css selector, .maintitle)