ng-click not firing, deep inside ui-views

I am using AngularJS and ui-router. I have a submenu which opens when they click their username, inside of which I want a logout button. It's a div with an ng-click that should log out the user; however, the ng-click is never firing.

This bit just shows/hides the subMenu

<div class="user-view-content" ng-init="showSubMenu = false" ng-click="showSubMenu = !showSubMenu">
    {{getUsername()}}
    <span class="glyphicon glyphicon-chevron-down"></span>
</div>

And the content of the subMenu - ng-click fails!

<div class="user-sub-menu" ng-show="showSubMenu">
    <div ng-click="logout()">Logout</div>
</div>

Oddly, if I take it outside of the sub-menu it works just fine. ng-click succeeds

<div ng-click="logout()">Logout</div>

And the css for user-sub-menu, the only thing that's different

.user-sub-menu {
    position: fixed;
    border-radius: 6px;
    border: solid 1px #f3fcff;
    padding: 1em;
    top: 51px;
    right: 4px;
}

All of this markup is wrapped inside of <div ui-view="user" class="user-view"></div>, which itself is about 5-6 divs deep nested in various ui-views. This is the first and only time int his app I have encountered ng-click not firing when it should. Due to the complexity involved I have not been able to reproduce in jsfiddle.

1. Why is my ng-click not firing?

Update 1

As iH8 suggested below, thought it might be an isolated scope issue (which doesn't make any sense but tried it anyway). The below code does not fire and does not change the {{testVal}} to 'after'. It remains 'before' always.

<div class="user-sub-menu" ng-show="showSubMenu" ng-init="testVal='before'">
    <div ng-click="testVal='after'">Logout</div>
    {{testVal}}
</div>