I am trying to achieve page navigation (Next and back button) using Angular UI-route. I am changing the state from controller and it is getting changed on view as well but is not redirecting me to that page. I have achieved it using button click using $state.go('stateName') but I want use Bootstrap page for this .
here is my code
$stateProvider
.state('settings', {
url: '/settings',
templateUrl: 'templates/settings.html'
})
.state('settings.profile', {
url: '/profile',
templateUrl: 'templates/profile.html',
controller: 'ProfileController'
})
.state('settings.account', {
url: '/account',
templateUrl: 'templates/account.html',
controller: 'AccountController'
})
.state('settings.profile1', {
url: '/profile1',
template: 'settings.profile1'
})
.state('settings.account1', {
url: '/account1',
template: 'settings.account1'
});
$urlRouterProvider.otherwise('/settings/profile');
// controlller
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
$scope.nextState = 'settings.account';
$scope.previousState = $state.current;
//alert('$stateChangeStart')
});
<ul class="pager">
{{nextState}}
<li><a ui-sref=".{{previousState}}">Previous</a></li>
<li><a ng-click=".{{nextState}}">Next</a></li>
</ul>