使用angular将常用模板加载到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中一个名为productView.html 的html页面的路径

我把它包装在一个带有id 的脚本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 -->

我想我已经很接近了，只是不知道我错过了什么。关于如何实现或能否实现这一点，有什么建议吗？