ng-click toggle only works on first click - angularjs

Question

I want to toggle a boolean by click event using Angular.
This is my the code
<div class="nav_mobile" ng-click="mobilestatus.navActive = (mobilestatus.navActive == false) ? true : false">
</div>
<nav>
<ul class="nav_mobile_list" ng-class="{active: mobilestatus.navActive}">
<li><a ui-sref="about" ng-click="mobilestatus.navActive = false">About</a></li>
<li><a ui-sref="contact" ng-click="mobilestatus.navActive = false">Contact</a></li>
</ul>
</nav>
The controller looks like this
angular.module('app').controller('NavCtrl', function ($scope){
$scope.mobilestatus = {navActive: false};
});
I also tried other shorthand notations. The initial value of navActive is false. The ng-click on nav_mobile makes the navActive attribute true the first time, but when clicking again, it doesn't return back to false. When clicking on the li items, the navActive does return back to false. Any suggestion is appreciated.

Answer 1

Try this statement
ng-click="mobilestatus.navActive = !mobilestatus.navActive"
EDIT
If you have no idea of whats going on inside your code try to debug it. Use function call instead of angular's DOM expression and log output into console. Also you can use breakpoints.
HTML
ng-click="toggle()"
Controller
$scope.toggle = function toggle() {
$scope.mobilestatus.navActive = !$scope.mobilestatus.navActive;
console.log('Status is ' + $scope.mobilestatus.navActive);
};
You will see if this code is executable and $scope.mobilestatus is available to html part.
EDIT
Here is plunker

Answer 2

Check this solution:
<div class="nav_mobile" ng-click="mobilestatus.navActive = !mobilestatus.navActive">
Test- {{mobilestatus.navActive}}
</div>
<nav>
<ul ng-class="{'active': mobilestatus.navActive, 'inactive': mobilestatus.navActive}">
<li><a ui-sref="about" ng-click="mobilestatus.navActive = !mobilestatus.navActive">About</a></li>
<li><a ui-sref="contact" ng-click="mobilestatus.navActive = !mobilestatus.navActive">Contact</a></li>
</ul>
</nav>