загрузка общих шаблонов в HTML-страницу с угловым

У меня есть страница, которая содержит разделы подробностей, которые являются общими для нескольких страниц моего приложения. Я пытаюсь уменьшить избыточность кода и создать эти мини-представления, которые будут загружены страницей.

На главной странице сведений у меня есть раздел, который я пытаюсь загрузить с помощью ng-include

<div ng-show="checkProducts()">
    <hr style="margin-bottom:5px!important"/>
      <p><strong><em>Products</em></strong></p>
         <div class="bs-associationPanel">
        <ng-include src="commontemplates/productView/shoes"></ng-include>
     </div>
</div>

Я не могу использовать маршрутизацию здесь, поскольку это действует как частичный вид на главной странице подробностей, которая уже использует маршруты для ее загрузки и привязки к контроллеру.

Значение src - это путь в APP на html-страницу с именем productView.html

Я завернул его в тег ng-template скрипта с идентификатором

 <script type="text/ng-template" id="shoes">
        <table class="table table-condensed table-responsive">
            <thead>
                <tr>
                    <th>brand</th>
                    <th>color</th>
                    <th>size</th>
                </tr>
            </thead>
            <tbody ng-repeat="s in detail.shoes">
                <tr>
                    <td>{{s.brand}}</td>
                    <td>{{s.color}}</td>
                    <td>{{s.size}}</td>                
                </tr>
            </tbody>
        </table>
    </script>

Я надеялся, что это сработает, но когда я создаю страницу, я не получаю никакого храма и не смотрю на проводника элементов, я вижу следующее

<!-- ngInclude: undefined -->

Я думаю, что я близок, я просто не знаю, чего мне не хватает. Любые предложения о том, как это можно сделать или это можно сделать?