AngularJS $scope variable does not go into view

Question

I have a simple boolean variable that switches a DIV to be hidden at startup and then shown after an action until the end of the application. But it does not switch - the DIV is always hidden. Please help, what is wrong in the code below:

<div class="right" ng-controller="EmployeeDetailsCtrl" ng-show={{showEmployeeDetails}}>
        <p>{{employee.name}} {{employee.surname}}</p>
</div>

inside EmployeeDetailsCtrl controller:

$scope.$on('showEmployee', function (event, data) {
    $scope.showEmployeeDetails = true;
    $scope.employee = data;
});
$scope.showEmployeeDetails = false;

BTW, the $scope.employee variable updates correctly after the event is triggered, so I'm really stuck what's going on here.

Answer 1

Remove the {{}} from your ng-show, like so:

<div class="right" ng-controller="EmployeeDetailsCtrl" ng-show="showEmployeeDetails">
        <p>{{employee.name}} {{employee.surname}}</p>
</div>

Answer 2

When you're using ng-show you're binding to an expression, not a string, so just use:

ng-show="showEmployeeDetails". That's why you can do more complex stuff like ng-show="1 + 1 === 2".

If that still doesn't cut it, it could be a scoping issue with primitives being assigned to a child scope and not seen up the parent scope. It doesn't look like it from the code you showed but perhaps it's simplified for this question, you never know.