DOM Not updated while using ng-click in function

Question

I am using a simple code. When click Login link, its div should hide. I am updating ng-show value for hiding. While clicking, the ng-show value is updated to "false" but the DIV is not Hidden

HTML

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <Title>Weather</Title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
        <script src="./app.js"></script>
        <nav class="navbar navbar-default" ng-controller="headerController">
          <div class="container">
            <div class="navbar-header">
              <a class="navbar-brand" href="#">
                Weather
              </a>
            </div>
              <div class="navbar navbar-right" ng-show={{loginStatus}}><a ng-click="onLogin()">login</a></div>
          </div>
        </nav>
    </head>
    <body>
        <div ng-controller="headerController">{{name}}</div>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </body>
</html>

app.js

var myApp = angular.module('myApp',[]);

myApp.controller('headerController',['$scope', function($scope){
    $scope.name="Christo";
    $scope.loginStatus=true;
    $scope.onLogin = function(){
        $scope.loginStatus=false;
        console.log($scope.loginStatus);
    };
}]);

Girafa Girafa · Accepted Answer · 2015-09-09T14:25:12

ng-show={{loginStatus}} should be replaced with ng-show="loginStatus". ngShow directive automatically evaluates expression, so you should not use interpolation here. More about this in docs

DOM Not updated while using ng-click in function

3 Answers