Finding elements in nested repeater in Protractor - protractor

Question

I'm trying to find an element in a nested repeater but I'm not sure how can I tackle it.
By default the HTML looks like following (editted it for easy understanding)
<div ng-repeat = "Repeater1">
<div ng-repeat = "Repeater2"> Text1 </div>
<div ng-repeat = "Repeater2"> Text2 </div>
<div ng-repeat = "Repeater2"> Text3 </div>
</div>
There is a button on the page view more, Which shows you three more items on the page. So after clicking the view more button the HTML looks like following
<div ng-repeat = "Repeater1">
<div ng-repeat = "Repeater2"> Text1 </div>
<div ng-repeat = "Repeater2"> Text2 </div>
<div ng-repeat = "Repeater2"> Text3 </div>
</div>
<div ng-repeat = "Repeater1">
<div ng-repeat = "Repeater2"> Text4 </div>
<div ng-repeat = "Repeater2"> Text5 </div>
<div ng-repeat = "Repeater2"> Text6 </div>
</div>
view more button gets disabled if there are no more items to be displayed on the page.
So my question is: from the default page (before clicking view more button) How can I find the element Text 6 ?
What the test should do:
Search the first three items for elementA
if not found, click on view more and search the next three items for elementA
if not found, click on view more again and search the next three items for elementA
The following code searches withing a repeater but I'm not sure how to search between nested repeater
let filteredList = this.Repeater2Elem.filter((item) => {
return item.getText().then((text) => {
return bundle === "text 2";
});
}).first().element(by.buttonText('Element Found')).click();

Answer 1

It depends if the elements which appear after the click "more" are present but not displayed or do not appear in the DOM at all.
Assuming the element is in DOM but isn't shown. (code shown below isn't tested)
function getAppearence(elem) {
return elem.isDispalyed().then(function (isDispalyed) {
if (isDispalyed)
return elem;//will return the element to continue working on it, otherwise return true
else {
return viewMoreButton.click().then(function () {
return getAppearence(elem);
});
}
});
}
this.Repeater2Elem.filter(function (item, index) {
return item.getText().then(function (text) {
return text === "textX";
});
}).then(function (elem) {
if (elem.length ==1)
return getAppearence(elem[0]).then(function (elem) {
return elem
})
})
First get the required element and then get it to be displayed by clicking recursive the 'view more' button.