Angular - Bootstrap: Page navigation (Next and back button) using Angular UI-route not working when changing the state from controller <p>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 . </p> <p><a href="https://plnkr.co/edit/KV9LEC?p=preview" rel="nofollow">plunker</a></p> <p>here is my code </p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><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') });</code></pre> </div> </div> </p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;ul class="pager"&gt; {{nextState}} &lt;li&gt;&lt;a ui-sref=".{{previousState}}"&gt;Previous&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a ng-click=".{{nextState}}"&gt;Next&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;</code></pre> </div> </div> </p>