Q:

How to pass variables between html in angularjs? 

I'm trying to use $rootScope to pass a boolean between two files and works perfectly... ONCE.  Then, it does not change even tho the CLICKED log appears. 
What the hell?? 
navbar.html
ng-click="openRightSideMenu(); // Works well

navbar.js
$scope.openRightSideMenu = () => {
     console.log("CLICKED") // this always logs, so ng-click is working well
     $rootScope.rightSideMenuOpen = true; // Opens the sideMenu but ONLY WORKS ONCE!!  It's not change to true the second time
}

sideMenu.html
ng-class="rightSideMenuOpen ? ' open' : 'closed'" // Toogle between open
            // and closed, works well but I cannot open the second time

ng-click="rightSideMenuOpen = false" // Close works well

Any idea why $rootScope.rightSideMenuOpen only works once and doesn't change the second time?? 

A:

You have a data hiding problem. 
The ng-click is setting the rightSideMenuOpen property of the local $scope of the element.  This hides the value of that property on $rootScope. 
ng-class="rightSideMenuOpen ? ' open' : 'closed'" // Toogle between open
            // and closed, works well but I cannot open the second time

̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶r̶i̶g̶h̶t̶S̶i̶d̶e̶M̶e̶n̶u̶O̶p̶e̶n̶ ̶=̶ ̶f̶a̶l̶s̶e̶"̶
ng-click="$root.rightSideMenuOpen = false"

This way the ng-click changes the property on $rootScope.