AngularJS ng-show not behaving as expected

Question

I have two divs that I want to show/hide based on whether user is logged in. I know user is logged in based on whether there are particular query params when the application loads. (It's contrived and it's for a demo) So when page loads, I have a var in the controller called login, which I initialize to false.

I use $scope.init to run some code after the page loads to test for the query params and set my login field appropriately. I've tried ng-show="login" as well as ng-show="login == false/true" . It never seems to display or hide.. it just always hides. What am I doing wrong?

    <div class="pull-right" style="padding-top: 16px;">
        <a ng-show="login == false" ng-href="http://someSite/authorize">Login</a>
    </div>
    <div ng-show="login == true" class="pull-right" style="padding-top: 16px;">
        Welcome, {{fullName}} - <img width="40" height="50" ng-src="{{picture}}"/>
    </div>

And in my controller -- omitted as much as possible for brevity

var app = angular.module('showtime', [], function($locationProvider) {
      $locationProvider.html5Mode({enabled:true,  requireBase: false});
    });

app.controller('showtimeController', function ($scope, $location, $http, $httpParamSerializer) {

    $scope.login = false;

    $scope.init = function () {
        $scope.oauth.authuser = $location.search()['authuser'];
        $scope.oauth.session_state = $location.search()['session_state'];
        $scope.oauth.prompt = $location.search()['prompt'];

        $scope.qs = $httpParamSerializer($scope.oauth);

        //   ...

        if ($scope.oauth.state) {
            console.log('returning from an access code flow with tokens and more');
            $http.get('http://someApi/code' + '?' $scope.qs).then(function (response) {
                $scope.picture = response.data.picture;
                $scope.login = true;
            });
        }
    };
});

Answer 1

Try

login === true

or

<div ng-show="!!login" class="pull-right" style="padding-top: 16px;">

Also can you try and print to the console and see if login value shows ?

Answer 2

You can use ng-show and ng-hide to achieve this

<div class="pull-right" style="padding-top: 16px;">
    <a ng-hide="login" ng-href="http://someSite/authorize">Login</a>
</div>
<div ng-show="login" class="pull-right" style="padding-top: 16px;">
    Welcome, {{fullName}} - <img width="40" height="50" ng-src="{{picture}}"/>
</div>

Both will work mutually dependent. Since we have used same condition inside ng-show and ng-hide only one div will be shown at a time.

ng-show and ng-hide will only set the visibility of an element. Will never stop the rendering of HTML DOM elements.