Understanding Angular layout while using ng-repeat

Question

I have the following code in one of my angular html files. I am trying to get div elements adjacent to each other with ng-repeat in a carousel.

Here is what I did so far.

<div class="carousel-inner" role="listbox">

            <div class="item active" layout="row">
                <div class="message" flex=33
                    ng-repeat="message in messages.images " layout-align="start end"
                     ng-if="$index > 0 && $index < 3">
                    <span class="video-message-name">{{message.text}}</span>
                </div>
            </div>
            <div class="item" layout="row">
                <div class="message" flex=33
                    ng-repeat="message in messages.images " layout-align="start end"
                     ng-if="$index > 2 && $index < 6">
                    <span class="video-message-name">{{message.text}}</span>
                </div>
            </div>

            <div class="item" layout="row">
                <div class="message" flex=33
                    ng-repeat="message in messages.images " layout-align="start end"
                    ng-if="$index > 6 && $index < 9">
                    <span class="video-message-name">{{message.text}}</span>
                </div>
            </div>


        </div>

The issue here is I am expecting the divs to look as this

message 1    message 2    message 3

But it is coming like

message 1

message 2

message 3

Can someone help me understanding layouts in this context.

Answer 1

This is not about Angular this is about CSS you can try:

.item{
    width: 100%
}    
.message{

    float:left;
    display: inline-block;
    width: 33%
 }

Online Demo