Angular view not rendering full html

I have a html that i include into my index using angular route.
Index.html:

    <ion-side-menus>

        <!-- Center content -->
        <ion-side-menu-content>
            <ion-header-bar class="bar-assertive">
                <h1 class="title">Content</h1>
            </ion-header-bar>
            <ion-content padding="true" scroll="true">
                
                <ion-nav-view></ion-nav-view>

            </ion-content>
        </ion-side-menu-content>
         
        <!-- Left menu -->
        <ion-side-menu side="left">
            <ion-header-bar class="bar-positive">
                <h1 class="title">Menu</h1>
            </ion-header-bar>
            <ion-content ng-controller="ListCtrl">
                <div class="item item-divider">Preliminary</div>
                <ion-list>
                    <ion-item href="#/intro">Introduction</ion-item>
                    <ion-item href="#/prelim1">Bible Abbr</ion-item>
                    <ion-item href="#/prelim1">Abbr. of Magisterium Doc</ion-item>
                    <ion-item href="#/prelim1">John Paul II to Legion of Mary</ion-item>
                    <ion-item href="#/prelim1">Preliminary Note</ion-item>
                    <ion-item href="#/prelim1">Frank Duff</ion-item>
                </ion-list>
                <div class="item item-divider">Chapters</div>
                <ion-list>
                                        <ion-item ng-repeat="m in main" href="#/{{m.id}}">
 {{m.chapter}}
                    </ion-item>
                </ion-list>
                <div class="item item-divider">Appendix</div>
                <ion-list>
                                        <ion-item ng-repeat="a in appendix" href="#/{{a.id}}">
 {{a.chapter}}
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>

    </ion-side-menus>

</body>

The rendered view, Intro.html:

<p>Test 1</p><p>Test 1</p><p>Test 1</p>

my route config

  .config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/')
    $stateProvider
  .state('home', {
      url: '/',
      templateUrl: 'home.html',
      controller: 'HomeCtrl'
  })
  
  .state('intro', {
      url: '/intro',
      templateUrl: 'chapters/prelim/1_Intro.html'
  });
})

Unfortunately only “Test 1” displays and the rest are hidden.
What can I do? Thanks

please show us the source-code of your intro.html

<!DOCTYPE html>
<html ng-app="legion">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
                    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
                                                                <link href="css/ionic.app.css" rel="stylesheet">
                                                                -->
        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>
        <!-- your app's js -->
        <script src="js/app.js"></script>
    </head>
    <body>

        <ion-side-menus>

            <!-- Center content -->
            <ion-side-menu-content>
                <ion-header-bar class="bar-assertive">
                    <h1 class="title">Content</h1>
                </ion-header-bar>
                <ion-content padding="true" scroll="true">
                    
                    <ion-nav-view></ion-nav-view>

                </ion-content>
            </ion-side-menu-content>
             
            <!-- Left menu -->
            <ion-side-menu side="left">
                <ion-header-bar class="bar-positive">
                    <h1 class="title">Menu</h1>
                </ion-header-bar>
                <ion-content ng-controller="ListCtrl">
                    <div class="item item-divider">Preliminary</div>
                    <ion-list>
                        <ion-item href="#/intro">Introduction</ion-item>
                        <ion-item href="#/prelim1">Bible Abbr</ion-item>
                        <ion-item href="#/prelim1">Abbr. of Magisterium Doc</ion-item>
                        <ion-item href="#/prelim1">John Paul II to Legion of Mary</ion-item>
                        <ion-item href="#/prelim1">Preliminary Note</ion-item>
                        <ion-item href="#/prelim1">Frank Duff</ion-item>
                    </ion-list>
                    <div class="item item-divider">Chapters</div>
                    <ion-list>
                                            <ion-item ng-repeat="m in main" href="#/{{m.id}}">
     {{m.chapter}}
                        </ion-item>
                    </ion-list>
                    <div class="item item-divider">Appendix</div>
                    <ion-list>
                                            <ion-item ng-repeat="a in appendix" href="#/{{a.id}}">
     {{a.chapter}}
                        </ion-item>
                    </ion-list>
                </ion-content>
            </ion-side-menu>

        </ion-side-menus>

    </body>
</html>

maybe i am blind, but i think that is not the content of your intro.html?

Am sorry it is actually 1_Intro.html

i simplefied the default ionic codepen for sidemenus.
Maybe that helps you:

There is a home state and a prelim state with 3 p-tags -> Everything is shown correctly.

Greetz

1 Like

Ok Thanks. I tried replacing the second (templates/prelim1.html) with:

<div align="center">PUBLISHED BY<br />CONCILIUM LEGIONIS MARIAE<br />DE MONTFORT HOUSE<br />MORNING STAR AVENUE<br />BRUNSWICK STREET<br />DUBLIN 7, IRELAND</div>
<p><br /><br /></p>
<div align="center">New and Revised Edition, 1993</div>
<p><br />Nihil Obstat:<br />Joseph Moran, O.P.<br /><em>Censor Theologicus Deputatus.<br /><br />Imprimi potest:</em><br />+ Desmond Connell<br />Archiep. Dublinen.<br />Hiberniae Primas.<br /><br />Dublin, die 8 December 1993<br /><br />Acknowledgements:<br /><br />Excerpts from the English translation of The Roman Missal (c)<br />1973, International Committee on English in the Liturgy, Inc.<br />All rights reserved.<br /><br />Translation of The Magnificat from the Hebrew published by<br />The Grail by kind permission of A. P. Watt Ltd. on behalf of The Grail.<br /><br />Extracts from English translations of documents of the<br />Magisterium by kind permission of the Catholic Truth Society<br />(London) and Veritas (Dublin).<br /><br />Quotation on page 305 by kind permission of Sheed and Ward.<br /><br /></p>
<div align="center">The official magazine of the Legion of Mary, Maria Legionis,<br />is published quarterly at<br />Magnificat House,<br />49 North Great Georges Street,<br />Dublin 1, Ireland.</div>
<p><br /><br />(c) Copyright 1993<br /><br /></p>
<hr size="1" width="75%" />
<div align="center">Printed in the Republic of Ireland by<br />Mahons, Yarnhall Street, Dublin 1</div>

but i had the same problem, try it in your codepen, Thanks

works fine:

but you should keep in mind, that you hav to close the side-menu before :wink:

Thanks a lot man. This can keep me going now. I appreciate the attention.
Regards