AngularJs Разделение результатов на деления по значению столбца

Я изо всех сил пытаюсь понять логику того, как отображать результаты в отдельных div в этом случае bootstrap col-md-4. Это приложение для обмена чатами, которое я пытаюсь создать. Есть комнаты и сообщения. Я хочу, чтобы каждая комната отображала только сообщения, сгруппированные вместе в div.

Мои результаты ($ scope.messages) выглядят так:

messages = [
    {"room_id":1,"message_id":2,"message_content":"hiiii","message_time":"2015-11-28 23:22:57","user_name":"Aaaa1aa"},
    {"room_id":1,"message_id":1,"message_content":"hi there","message_time":"2015-11-28 23:22:40","user_name":"aaaa2aa"},
    {"room_id":2,"message_id":3,"message_content":"hyyy","message_time":"2015-11-28 23:23:07","user_name":"Guest"},
    {"room_id":2,"message_id":4,"message_content":"aaaaa","message_time":"2015-11-28 23:23:20","user_name":"aaaa2aa"}
];

Я хочу отобразить каждый набор результатов, сгруппированный по столбцу room_id, поэтому, повторяя данные, этот набор будет выглядеть так

<div class="col-md-4"> Room Id - 1
aaaa2aa - hi there
Aaaa1aa - hiiii
</div>

<div class="col-md-4"> Room Id - 2
Guest - hyyy
aaaa2aa - aaaaa
</div>

Я подумал, что что-то вроде этого может работать после нескольких других вариантов, но не дает никаких результатов.

<div class="col-md-4" ng-repeat="data in messages">
<div ng-repeat="data in data[$index]">

{{data.user_name}}
{{data.message_content}}

</div>
</div>

Спасибо за любую помощь.

Это то, что сработало для меня, но вы должны сначала добавить фильтр модуля как зависимость:

<div class="col-md-4" ng-repeat="data in messages | groupBy: 'room_id'">
    {{data[$index].room_id}}
<div ng-repeat="data in data">
    {{data.user_name}}
    {{data.message_content}}
    </div>
</div>