When working with angular (or any client side js framework) and ajax you have to stick to one simple rule, load content you want to feed to google bot on first load, without requiring an ajax round trip.
So in your case those first 18 rooms description is content google crawler will eat, digest and index, all the others dynamically loading using ajax won't.
Same goes for the 400 characters, show them on first load, don't retrieve them later through an ajax call.
Keep in mind if you want to show content gradually you can just serve it on first load to the client and show it gradually through javascript with ng-cloak + ng-show/ng-hide.
One word about ng-show/ng-hide, there have been some debate (even here on MOZ Q&A) around css display: none; because John Muller and Matt Cutts stated few times google doesn't like hidden content, meaning they do not index it, and they may penalize websites for hiding content. In my opinion it was clear they were referring to navigation menu or manipulative techniques.
To quote another of Matt Cutts videos "google knows today web is dynamic and content is show and hidden by user interaction", so I didn't expect google to penalize a fari use of ng-cloak (display: none;).
But these kind of things always worries me, so I tested it on few pages with 200/300 words content, which were already indexed and ranking around top20/top10 in SERP, adding some ng-cloak content on some, removing ng-cloak and just showing the content on some other pages. The results was no change at all, they didn't move, not a single a position one way or the other.
One final notice about gradually loading more content, like in your example, additional rooms after the first 18. Of course those are not going to be indexed in that page. But here you have to think about your content strategy for that listing page, and what is important to feed to google crawler for indexing. 100 titles of rooms? Do you really expect people to reach that page searching for one of those titles? I don't think so.