title: How do I get this HTML tab to be visible based on ng-show and an external variable - newby AngularJS question
body: <p>The HTML snippet that controls the tab presentation:</p>
  
  <pre><code>&lt;li class="presentation" ng-show="currentUserAuthority == LIBRARIAN" &gt;
  </code></pre>
  
  <p>....</p>
  
  <p>The problem is that this variable "currentUserAuthority" does not get updated until after the web page is initialized.  Thus everybody is initialized as GUEST and the LIBRARIAN tab is not visible for anybody. Is there any way in AngularJS to fix this? I know this would probably be easy if I had a good understanding of Javascript/Angular, but I do not. </p>
  
  <p>EDIT: I am adding code to clarify, as asked. I have inherited this code, so I am having to feel my way through it. Basically, there is a MYPANEL.html and an accompanying MYPANEL.js that has the controller. The problem seems to be a timing issue. MYPANEL.js sees currentUserAuthority as default GUEST before login.js finishes receiving the role from the backend and sets currentUserAuthority as LIBRARIAN. I have a watch routine in MYPANEL.js that, from what I understand, is supposed to act as a kind of event listener and inform everyone that the variable has changed, including the webpage. The watch code is as follows.</p>
  
  <pre><code>$scope.$watch('GlobalService.currentUserAuthority`,function() {
  $scope.currentUserAuthority = GlobalService.currentUserAuthority;
  LoggingService.info('WATCH FIRED: current value is '+ $scope.currentUserAuthority);
  $scope.$apply();
  });
  </code></pre>
  
  <p>From the logs it appears that $watch only executes in the order it appears in the MYPANE.js code, and later, when I can verify that the variable being watched has changed, this function is not called.</p>
  
  <p>So what am I doing wrong? I need to notify mypane.html that a variable has changed so that my tab appears properly. Thanks for any help you can give.</p>