Ionic States

Hi,

Trouble with .state in an app that I am creating to learn ionic. Scourged the internet and forums but couldn't find a break through.

I have 3 views: list.html, view.html and bill.html. When I add the state for the view 'bill.html', everything breaks. view.html contains a button, and upon clicking, it should display bill.html. Can you pls help to check why it breaks? Thanks for your time.

index.html:

<link href="lib/ionic/css/ionic.css" rel="stylesheet">

<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="js/app.js"></script>
<script src="cordova.js"></script>

Back

app.js:

var nameApp = angular.module('starter', ['ionic', 'ui.router']);

nameApp.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
.state('list', {
url: '/',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
.state('view', {
url: '/view',
templateUrl: 'view.html',
controller: 'ViewCtrl'
});

$urlRouterProvider.otherwise("/");

});

nameApp.factory('event', function() {

event = {};
event.description = "";
event.venue = "";
event.date = "";
return event;
});

nameApp.controller('ListCtrl', function($scope, event) {
$scope.input = event;
});

nameApp.controller('ViewCtrl', function($scope, event) {
$scope.input = event;
});