$ionicHistory.goBack() not working?


I’m creating a very simple App with a “Go back” button, to go back to the previous view.

I tried using $ionicHistory.goBack() just like specified in the documentation, but I can’t seem to get it working.

Here is my code:

<button class="button button-block button-assertive" ng-click="goBackHandler()">
   Go Back

And the controller code:

angular.module('starter.controllers', ['ionic'])

.controller('AppCtrl', function($scope, $ionicHistory) 
    $scope.goBackHandler = function()
        $ionicHistory.goBack();                           //This doesn't work
        //window.history.back();                          //This works
        //alert('code to go back called. Did it work?');  //For testing

This should be textbook - What could I be doing wrong?

Here is a plunker - http://plnkr.co/edit/yJqdfs?p=info

same with me before, but right now i am use like this:

.controller('NavigationCtrl', function($scope, $location, $ionicHistory){
        $scope.myGoBack = function() {
	       $backView = $ionicHistory.backView();
        $scope.go = function ( path ) {
	       $location.path( path );

Hope this work in your code too.

1 Like


thanks for the help. I tried out your snippet but I’m afraid it also doesn’t work.

Upon inspecting, I see that $ionicHistory.backView() always returns null for me, even when I navigate between different views…

Now I’m trying to understand why.

Here is the updated Plunker with your code - http://plnkr.co/edit/tvXUXxseLxMiSgTugFP8?p=preview

Do you use left menu in your application? If true you may notice that directive menu-close will close menu and clear your history. Use menu-toggle instead of menu-close.


This works for me. Thanks

##Alex! you are a genius!

Thank you, also i add enable-menu-with-back-views=“true” in my menu to add back button into non direct childs of the navigation.

    <ion-side-menus  enable-menu-with-back-views="true">
      <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-stable">
          <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
        <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>

      <ion-side-menu side="left">
        <header class="bar bar-header bar-stable">
          <h1 class="title">Menu</h1>
        <ion-content class="has-header">
            <ion-item nav-clear menu-toggle href="#/app/start">
            <ion-item nav-clear menu-toggle href="#/app/contact">
              Contact us

for me also $ionicHistory was not working
but in index.html ,
I was using
was not working
I replaced it with

its working fine now

<!DOCTYPE   html>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

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

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAPU3y59ihAELaLjTWMNg89cCwvb6K2L8Q&libraries=places"></script>
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <style type="text/css">
      .platform-ios .manual-ios-statusbar-padding{
      .manual-remove-top-padding .scroll{
        padding-top:0px !important;
      ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
      ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
        border-right: 0px;
<!-- <script type=“text/javascript“ src=“http://maps.googleapis.com/maps/api/js?key=AIzaSyAPU3y59ihAELaLjTWMNg89cCwvb6K2L8Q&amp;libraries=places“></script> -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/services.js"></script>
    <script src="js/directives.js"></script>
    <script src="js/constants.js"></script>

  <!-- <script src = "lib/ngCordova/dist/ng-cordova.min.js"></script> -->

    <!-- Only required for Tab projects w/ pages in multiple tabs 
    <script src="lib/ionicuirouter/ionicUIRouter.js"></script>

  <body ng-app="app"  controller="AppCtrl">
<!-- <ui-view></ui-view>   -->
  <!-- <ui-view></ui-view> -->
  <!-- <script type=“text/javascript“ src=“http://maps.googleapis.com/maps/api/js?key=AIzaSyAPU3y59ihAELaLjTWMNg89cCwvb6K2L8Q&amp;libraries=places“></script> -->
   <!-- <script src="https://maps-api-ssl.google.com/maps/api/js?libraries=places"></script> -->

If all else fails:

$scope.GoBack = function() {


You are a Genius indeed!

Thank “U” :slight_smile:

thanks a lot you are helpful, it works great


<button class="button button-float" ng-click="$ionicGoBack()">
    <i class="icon ion-ios-arrow-back"></i>

thank you very very very much…My problem is solved easily…thank you thank you thank you so much :grinning:

Heyy,I cant’ go back on press key on mobile…that time what I do…please suggest me

Thanks a lot! this save me, a lot of people seem to have the same problem.

Omg, this solved my problem very very easy. TKS