Conditionally hide menu button in ionic framework outside <ion-view>

Question

In the ionic framework I am trying to hide the menu button conditionally. For other reasons I had to split the menu in its own controller (I don't want to completly re-render the menu and header bar on a refresh), so the header is not in ion-view. I created a watcher on the conditional variable (a stateparam) in the controller of the header. The console log outputs the conditional variable correctly, but the view is not updated (the menu button is always showing).

This is the template:

<ion-side-menus>
    <ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios7">
            <ion-nav-back-button ng-if="!isHome" class="button-clear"><i class="icon ion-ios7-arrow-back"></i>Back</ion-nav-back-button>
            <button ng-if="isHome" menu-toggle="left" class="button button-icon icon ion-navicon"></button>
            <h1 class="title">Title</h1>

        </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>

...
</ion-side-menus>

And in the controller:

$scope.$watch(function(){
    return $stateParams.contentUrl;
},
    function(newVal){
        console.log(newVal);
        if(!newVal || newVal === 'someParam'){
            $timeout(function(){
                $scope.$apply(function(){
                    $scope.isHome = true;
                });
                console.log("home");
            });
        } else {
            $timeout(function(){
                $scope.$apply(function(){
                    $scope.isHome = false;
                });
                console.log("not home");
            });
        }
    });

Is there an easier way? Or am I missing something here?

Answer 1

You can use the hide-back-button attribute on the <ion-view> element to declare if that view should hide the back button by default.

http://ionicframework.com/docs/nightly/api/directive/ionView/

<ion-view hide-back-button="true">
  <!-- view contents -->
</ion-view>

Answer 2

A kinda dirty workaround would be to give those buttons an id and then use jqlite to hide them like this in the controller:

angular.element(document.querySelector('#back-button')).addClass('hidden');