Slide-Box in Ionic not working

I am new to Angular/Ionic and am trying to implement a slide-box for my app but it's not quite working. There isn't any error either so I can't tell where to go from here.

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'
  }
}
})