Adding <div> in middle of ng-repeat using $index - Bootsrap container

Question

I am tring to output <div> in middle of ng-repeat using $index== - however the Banner <div> is within the parent container so its not going accross the full width of the screen. I have tried using the class="container-fluid" on the Banner, but its making it even smaller. Is there any way to break out of the parent container at all (just for that one div, in the middle of the ng-repeat) to make the Banner full width?

This is how I would like it to look (for visual purposes only, need div's to be output using the ng-repeat): Plunker-1

And this is how it currently looks: Plunker-2

Answer 1

Here is the solution : https://plnkr.co/edit/pYO1G8M3jIDXHrRSE4YE?p=preview

---

You do not need container-fluid to achieve what you intend to.

---

 <div class="col-md-12" id="Banner" ng-if="$index==8">

               <div class="well well-sm text-center">
                  Banner

              </div>
 </div>

Answer 2

You're close, try this:

<div id="content">
  <div class="container" ng-controller="MainController">

  <h1>Hello Plunker!</h1>

    <div ng-class="$index === 8 ? 'col-md-12' : 'col-md-3'" ng-repeat="item in Data">
      <div class="container-fluid" id="Banner" ng-if="$index === 8">
        <div class="well well-sm text-center">
          Banner
        </div>
      </div>
      <div class="well active" ng-if="$index !== 8">
        <h3>{{item}}</h3>
      </div>
    </div>
  </div>
</div>