离子滑动盒不工作

Question

我是Angular / Ionic的新手，我正在尝试为我的应用程序实现一个幻灯片盒，但它不太合适。没有任何错误，所以我不知道从哪里去。

settings.html：

<ion-view title = "Dynamic Slides">
<script id = "firstSettingPage.html" type = "text/ng-template">
  <h1> First Slide! </h1>
</script>
<script id="secondSettingPage.html" type="text/ng-template">
  <h1>Second Slide!</h1>
</script>
<script id="thirdSettingPage.html" type="text/ng-template">
  <h1>Third Slide!</h1>
</script>

<ion-slide-box>
    <ion-slide ng-repeat = "slide in data.slides | filter:{viewable: true}">
        <div ng-include src = "slide.template"></div>
    </ion-slide>
</ion-slide-box>
</ion-view>

controller.js：

.controller('slideBoxCtrl', ['$scope', function($scope) {
$scope.data = {
    slides: [
    {
        'template' : 'firstSettingPage.html',
        'viewable' : true
    },

    {
        'template' : 'secondSettingPage.html',
        'viewable' : true
    },

    {
        'template' : 'thirdSettingPage.html',
        'viewable' : true
    }     
]
};
}])

app.js：

.state('app.settings', {
url: "/settings",
views: {
  'menuContent': {
    templateUrl: "templates/settings.html",
    controller: 'slideBoxCtrl'
  }
}
})