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

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');

Answer 3

Setting hide-back-button to false did not work for me. However, in my case the easier solution was to have
<ion-nav-buttons side="left"></ion-nav-buttons>
inside <ion-view>. This is to just include a empty left side nav buttons. This did the trick for me.

Answer 4

It can be done in a easy way:
<ion-side-menus enable-menu-with-back-views = "true">
and on the specific pages where you want to hide the Menu and nav bar, let say your Login Page(inside your login Controller), just type- don't forget to include specified objects inside the controller function.
$scope.$on('$ionicView.beforeEnter', function (event) {
$scope.$root.showMenuIcon = false;
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.beforeLeave', function (event) {
$scope.$root.showMenuIcon = true;
$ionicSideMenuDelegate.canDragContent(true);
});