protractor test failing because ElementNotVisibleError after adding ng-if directive

I have a web element which the test was able to find until we intruduce ng-if directive to the same. Now my test is not able to find the web element:

ElementNotVisibleError: element not visible

<select ng-if="tasktypepermission" id="elementType" ng-model="task.elementType" ng-options="key as value for (key, value)  in elementTypeoptions" name="elementType" class="span3 ng-scope ng-pristine ng-valid errorForInput" data-trigger="blur focusout" tasknumber-validator="" ng-disabled="task.id">
    <option class="blank" value="">Select</option>
    <option value="1">LOV</option>
    <option value="2">REFERENCE INFO</option>
    <option value="3">VARIABLE</option>
</select>

The way I am accessing the element is:

var taskType    = function(){ return element(by.id('elementType'));};

What should I do to make it work? I am very new to protractor or even front end testing, so please bear with me.