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.

just move {{}} and make it ng-show="showEmployeeDetails" ... — Poyraz Yilmaz, May 23 '15 at 20:38
It have more information about your question: http://stackoverflow.com/q/12599637/2451726 — Arulkumar, May 23 '15 at 20:51

score 3 · Accepted Answer · answered May 23 '15 at 20:41

3

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

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

answered May 23 '15 at 20:41

Tyler

103
1
7

score 1 · Answer 2 · answered May 23 '15 at 20:40

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.

AngularJS $scope variable does not go into view

2 Answers2