Ionic hide-tabs not work on nested view

Followed by the article How do I hide the tabs in Ionic Framework, the hide-tabs directive works fine. But it has some problem when nested view.

As you can see in the codepen http://codepen.io/WilsonFpz/pen/MaxaQR, when the user navigate from home->level1->level2, the level2`s tabs show again, but the $root.hideTabs is false as printing out.

var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
return {
    restrict: 'A',
link: function(scope, element, attributes) {
    scope.$watch(attributes.hideTabs, function(value){
        $rootScope.hideTabs = value;
    });

    scope.$on('$destroy', function() {
        $rootScope.hideTabs = false;
    });
}
};
});

Please give me some hints. Thanks.