[angular1.6 OnsenUI2] ng-includeで読み込んだhtml内のons-bottom-toolbarが画面最下部にならない

Question

angular1.6、OnsenUI2.0 で開発しています。

いずれも初挑戦のため、うまくいかない理由が検討つかないためご助言お願い致します。

フッター用のhtmlを別ファイルにして、ng-includeで読み込もうとしています。
ですが、そのフッター用htmlの中身をそのまま読み込み元に書いてある場合は
期待通りに、画面最下部にフッター表示されるのですが
ng-includeで読み込むと、初期表示時のディスプレイ最下部に表示されたまま動きません。
（スクロールしていっても下のままにならず、初期表示時の最下部で固定される）

コードは以下のような状態です。

<main.html>

<ons-navigator var="navi">
  <ons-page>
    <div class="contents">
       ～～～
    </div>
    <!-- fotter -->
    <ng-include src="'views/footer.html'"></ng-include>
  </ons-page>
</ons-navigator>

<footer.html>

  <ons-bottom-toolbar id="footer">
    <ons-row>
      <ons-col align="center" width="40%">
      </ons-col>
      <ons-col align="center" width="20%" class="add-btn">
      </ons-col>
      <ons-col align="center" width="40%">
      </ons-col>
    </ons-row>
  </ons-bottom-toolbar>

onsenタグを使っているものをincludeする際は、ただng-includeしてもうまく動作しないのでしょうか？

ご助言お願い致します。

Answer 1

自己解決しました。

ng-includeにてons-bottom-toolbarタグを含むhtmlを読み込むと
ons-bottom-toolbarタグのabsolute指定がうまく効かなくなるようなので
(ng-includeを直接書くと、absoluteが認識する親タグがng-includeタグの部分だと思われるから？)
ons-bottom-toolbarタグは読み込み元画面に記載し、そのタグにng-includeをつけて
ons-bottom-toolbarタグ配下のソースを読み込むこととしました。

--- 変更後のソース ---
<main.html>

<ons-navigator var="navi">
  <ons-page>
    <div class="contents">
       ～～～
    </div>
    <!-- fotter -->
    <ons-bottom-toolbar id="footer" ng-include="views/footer.html"></ons-bottom-toolbar>
  </ons-page>
</ons-navigator>

<footer.html>

    <ons-row>
      <ons-col align="center" width="40%">
      </ons-col>
      <ons-col align="center" width="20%" class="add-btn">
      </ons-col>
      <ons-col align="center" width="40%">
      </ons-col>
    </ons-row>