Reset $rootscope value used to hide back button

Question

I am using ng-hide to hide back button and show it in required pages. In app.js I have following code where i am declaring the initial value to true:

var app = angular.module('myApp', ['ui.bootstrap', 'ui.router', 'ui.mask', 'ngSanitize', 'ngAnimate', 'input-digits', 'input-phone','dailyTips']).run(function ($rootScope) {
    $rootScope.hideNavBackBtn = true;
});

And after that in each controller where I want back button to be shown I am setting value as:

$rootScope.hideNavBackBtn = false;

But when I come back to the previous page the back button is there, this should not happen. Only for the specific pages where I have declared value as false the back button should show.

How to rectify this issue?

What my understanding is app.js is already loaded so when I come back the $rootScope value will remain as false. If my understanding is correct how to rectify it?

In app.js file config function were I have declared different state like:

.state('home.overview', {
        url: '/overview',
        templateUrl: 'modules/Overview.html',
    })

In this if I define controller and set value to true. Then the back button will not be visible. But then I have to define the $rootscope value in every state I create, that dont look like viable solution.

Answer 1

Your $rootScope.hideNavBackBtn = true; is only executed once, when your Angular module is initialized.

You change the value ($rootScope.hideNavBackBtn = false;) only in some controller to set it to false. You never set it to true again.

what you can do is to set it to true on the ng-click of this button.