Angularjs - bind value from directive to ng-show/hide anywhere in document

Problem :

Firstly,,, I am looking for a solution better/more secure then this one,, but for now this is what works best considering my needs...

Now to the point..

I have a directive I use to authenticate a user.. The idea is that a user can log in on any site page and stay on the page.. and when they log in "admin" components on the page load. Admin componnents are wrapped in belonging divs..

I need a value from the directive to set ng-show to true or false as user logs in and out. Ng-show can be on any/multiple element/s in the page.

Here is my directive

app.directive('login', function($http, $rootScope) {
return {
    restrict: 'E',
    template: "<form>" +
              "<label>Username</label>" +
              "<input type='text' ng-model='username'>" +
              "<label>Password</label>" +
              "<input type='password' ng-model='password'>" +
              "<br>" +
              "<input type='submit'>" +
              "</form>",
    link: function(scope, elem, attrs) {

        elem.bind('submit', function() {

            var user_data = {
                "username": scope.username,
                "password": scope.password,
            };

            $http.post("http://lessons.localhost/auth.php", user_data)
                .success(function(response) {

                            switch (response) {
                            case "success":
                                sessionStorage.userStatus = "success";
                                sessionStorage.frameStatus = "true";
             // I need framestatus to bind to ng-show on any element in the page
                                break;

                            case "failure":
                                sessionStorage.userStatus = "failure";
                                sessionStorage.frameStatus = "false";
                                break;

                             default:
                                sessionStorage.userStatus = "absent";
                                sessionStorage.frameStatus = "false";
                                break;
                            }
                  console.log(sessionStorage.userStatus + sessionStorage.frameStatus);
          });

        });

          console.log(sessionStorage.userStatus + sessionStorage.frameStatus);

     }
 }
 });

1. Alternatively,, How could I create a directive called xyz that I could apply to any element depending on login status that does not show as css in code inspector? I do need the first problem solved but in reality I would prefer a better method.

Solution :

You can make your directive's scope inherit from where it is used by setting scope:true in your directive. Then update a property on the parent scope or rootScope inside your directive based on success or failure of the login request.

Here is a working plunker

http://plnkr.co/edit/JUato1?p=preview

Please note that, I have set the userLoggedIn to true even in case of error, just to demonstrate.