Content placed in same view below where week.html gets rendered is not being rendered

[bmwertman]

I have another block of content, a carousel slider, that I can not get to render if it is placed below where the week.html markup gets rendered. If I move it above where week.html gets rendered, the carousel and calendar week view render fine and don't interfere with each other.

[twinssbc]

@bmwertman do you have an example page? I tried to insert the carousel under the below section in my demo page, it renders well.

<div class="well well-sm">
    <calendar ng-model="currentDate" calendar-mode="mode" event-source="eventSource"
        range-changed="reloadSource(startTime, endTime)"
        event-selected="onEventSelected(event)"></calendar>
</div>   

[bmwertman]

I'm only trying to show the week view of the calendar above my carousel. So I have some sections of calendar.html and week.html commented out. As shown below the carousel does not render. If I move the calendar below the carousel in my manage.html file both the carousel and week view calendar render.
caledendar.html

`<div ng-switch="calendarMode">`
    `<div class="row calendar-navbar">`
        `<!-- <div class="nav-left col-xs-2">`
            `<button type="button" class="btn btn-default btn-sm" ng-click="move(-1)"><i
                    class="glyphicon glyphicon-chevron-left"></i></button>`
        `</div> -->`
       `<div class="calendar-header col-xs-8"><strong>{{title}}</strong></div>`
       `<!--  <div class="nav-right col-xs-2">`
            `<button type="button" class="btn btn-default btn-sm" ng-click="move(1)"><i`
                    `class="glyphicon glyphicon-chevron-right"></i></button>`
        `</div> -->`
    `</div>`
    `<dayview ng-switch-when="day"></dayview>`
    `<monthview ng-switch-when="month"></monthview>`
    `<weekview ng-switch-when="week"></weekview>`
`</div>`

week.html

`<div ng-switch="calendarMode">`
    `<div class="row calendar-navbar">`
        `<!-- <div class="nav-left col-xs-2">`
            `<button type="button" class="btn btn-default btn-sm" ng-click="move(-1)"><i
                    class="glyphicon glyphicon-chevron-left"></i></button>`
       ` </div> -->`
        `<div class="calendar-header col-xs-8"><strong>{{title}}</strong></div>`
       `<!--  <div class="nav-right col-xs-2">`
            `<button type="button" class="btn btn-default btn-sm" ng-click="move(1)"><i
                    class="glyphicon glyphicon-chevron-right"></i></button>`
        `</div> -->`
    `</div>`
    `<dayview ng-switch-when="day"></dayview>`
    `<monthview ng-switch-when="month"></monthview>`
   `<weekview ng-switch-when="week"></weekview>`
</div>`

manage.html (where I am trying to render the week view calendar above the carousel)

<ion-view title="Scheduling">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-pane style="position:absolute;top:44px;">
    <calendar id="week-cal" ng-controller="CalendarController" calendar-mode="mode" event-source="eventSource">
    <ul id="tech-scheduling-slider" rn-carousel >
      <li class="tech_slide" ng-repeat="technician in technicians">
        <h3 class="tech_name">{{technician.firstName}} {{technician.lastName}}</h3>
        <hr>
        <img class="ase_logo" src="img/ASE_certified.png">
        <ul>
          <li ng-show="technician.engineRepair"><img src="img/checkmark.png">Engine Repair</li>
          <li ng-show="technician.autoTrans"><img src="img/checkmark.png">Auto Trans & Transaxle</li>
          <li ng-show="technician.axlesManualTrans"><img src="img/checkmark.png">Manual Trans & Axles</li>
          <li ng-show="technician.enginePerformance"><img src="img/checkmark.png">Engine Performance</li>
          <li ng-show="technician.brakes"><img src="img/checkmark.png">Brakes</li>
          <li ng-show="technician.suspensionSteering"><img src="img/checkmark.png">Steering & Suspension</li>
          <li ng-show="technician.heatingAC"><img src="img/checkmark.png">Heating & A/C</li>
          <li ng-show="technician.electricalElectronics"><img src="img/checkmark.png">Electrical & Electronics</li>
          <li ng-show="technician.lightVehicleDiesel"><img src="img/checkmark.png">Light Vehicle Diesel</li>
        </ul>
      </li>
    </ul>
  </ion-pane> 
</ion-view>

Screenshot of code in inspector with both rendered

And a screenshot of the code in inspector where only the week view calendar renders

[bmwertman]

I found the issue. This is a bug related to the Ionic framework ion-content and <ion-pane> directive/ HTML tags. See the issue here ionic-team/ionic-framework#841.