How to call a rootscope fuction in html - Angular Js

Question

i have made a rootscope function in which I am actually logging out the user. But I dont know how to call it in a view .

My functions is

    $rootScope.logout = function () {
            $cookies.remove('auth_token');
            $cookies.remove('role');
            $cookies.remove('status');
            $cookies.remove('id');
            $location.path('/signin');
//            window.alert("Logout Successfully");
            $rootScope.auth_token = $cookies.get('auth_token');
            $rootScope.role = $cookies.get('role');
            $rootScope.status = $cookies.get('status');
            $rootScope.id = $cookies.get('id');
            $rootScope.keyword_auth_token = 'Bearer ' + $rootScope.auth_token; //Need to store all of them 

            $rootScope.is_loggedin = false;
        };

My view is

<button ng-click="$root.logout()">Logout</button>

I have tried $root.logout(), $rootScope.logout() but its not working.

Answer 1

It shoud just be available on the scope, since $scope inherits from $rootScope. Try:

<button ng-click="logout()">Logout</button>

UPDATE...

Since you are trying to access $rootScope from outside of any controller, where there is no child $scope that inherits from $rootScope then the logout function won't be automatically available via inheritance (as I had previously suggested).

You'll have to declare the $rootScope.logout function in the module's run block instead. For more information on this, read the Module Loading & Dependencies part of the angular docs.

JS:

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

app.run(function($rootScope){
  $rootScope.logout = function () {
      // ...
  }
});

Now the logout function should be available to call like this:

HTML:

<button ng-click="logout()">Logout</button>

Sample Plunk - Accessing $rootScope where there is no child $scope