Adding a new page in ionic

I created 2 pages, one for logging in with facebook and another one for slider. And in slider, I've got a button. When that button is pressed, I want it to go to a new page.
Here are the states: 

.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('root', {
            url: '',
            controller: 'rootCtrl',
            data: { 
                authenticate: false
            }
        })
        .state('home', {
            url: '/home',
            templateUrl: 'home.html',
            controller: 'homeCtrl',
            data: {
               authenticate: true
            }
        })
        .state('login', {
            url: '/login',
            templateUrl: 'login.html',
            controller: 'loginCtrl',
            data: {
                authenticate: false
            }
        })
        .state('balldrop', {
            url: '/balldrop',
            templateUrl: 'balldrop.html',
            controller: 'ballCtrl',
            data: {
                authenticate: true
            }
        })
    ;

    // Send to login if the URL was not found
    $urlRouterProvider.otherwise('/login');
})

Here is ballDrop.html: 

<body ng-controller="ballCtrl">

  <ion-view>
    <img src="img/present.png">
    <img src="img/past.png">
    <img src="img/future.png">      
  </ion-view>

</body>

But when I add new router for balldrop, the ionic live server displays a blank page. Where is the error?

check for the error in Chrome dev tools console. Gives an idea what's missing.