Navigational bar content built depending on login state I created a login service which holds a boolean based on if a user is logged in or not.

 angular.module('deafApp')

    .service('LoginService', function(){

        var $this = this;

        $this.loggedIn = false;


    });


Inside my login controller (LoginCtrl), I attach the LoginService to a local scope object and on the successful login callback function I turn the loggedIn value to true like so.

angular.module('deafApp')

.controller('LoginCtrl', ['Auth', '$scope', 'LoginService', function(Auth, $scope, LoginService) {

    $scope.Login = LoginService;

    $scope.loginUser = function() {

        Auth.$authWithPassword({
            email: $scope.email,
            password: $scope.password
        }).then(function(authData) {
            console.log("Logged in as:", authData.uid);
            /*
             WHERE I CHANGE THE VALUE TO TRUE
            */
            $scope.Login.loggedIn = true;
        }).catch(function(error) {
            console.error("Authentication failed:", error);
        });
    }

}]);


I wanted to change the navigation appearance based on a user logging in, so inside my navigation controller I've attached the LoginService to a local scope object again and created a function to return true or false like so.

angular.module('deafApp')

.controller('NavCtrl', [ 'LoginService',function(LoginService){
    var $this = this;

$this.Login = LoginService;

$this.isShowing = false;

$this.showToggle = function() {
    $this.isShowing = !$this.isShowing;
};

$this.goHome = function() {
    $this.isShowing = false;
};

 /*
    THIS FUNCTION RETURNS VALUE OF LOGGED IN 
 */
    $this.userLoggedIn = function() {
        return $this.Login.loggedIn;
    }


$this.navLinks = [
    {name: 'About-us', ref:'about', title: 'About DeafandHoh Page'},
    {name: 'Facts', ref: 'facts', title: 'Facts &amp; Deaf Empowerment Page'},
    {name: 'News', ref: 'news', title: 'News Page'},
    {name: 'Products', ref: 'products', title: 'Products Page'},
    {name: 'Directory', ref: 'directory', title: 'Directory Listings Page'},
    {name: 'Resources', ref: 'resources', title: 'Resources Page'},
    {name: 'Login / Register', ref: 'login', title: 'Login &amp; Register Page', hide: 'nav.userLoggedIn()'},
    {name: 'Profile', ref: 'profile', title: 'User Profile Page', show: 'nav.userLoggedIn()'},
    {name: 'Chatroom', ref: 'chatroom', title: 'Come Chat!', show: 'nav.userLoggedIn()'},
    {name: 'Logout', ref: 'logout', title: 'Logout', show: 'nav.userLoggedIn()'}
];

}]);


I then attached it a hide and show property to several of the navLinks which get repeated that I want to either hide when truthy and show when truthy.

{name: 'Login / Register', ref: 'login', title: 'Login &amp; Register Page', hide: 'nav.userLoggedIn()'},
{name: 'Profile', ref: 'profile', title: 'User Profile Page', show: 'nav.userLoggedIn()'},
{name: 'Chatroom', ref: 'chatroom', title: 'Come Chat!', show: 'nav.userLoggedIn()'},
{name: 'Logout', ref: 'login', title: 'Login &amp; Register Page', show: 'nav.userLoggedIn()'}


The HTML looks like this:

&lt;li ng-repeat="nav in nav.navLinks"&gt;
    &lt;a title="{{nav.title}}" ui-sref="{{nav.ref}}" ng-bind="nav.name" ng-hide="nav.hide" ng-show="nav.show"&gt;&lt;/a&gt;
  &lt;/li&gt;


Essentially, the purpose is for a login/register nav link to disappear when a user logs in and some more unique features in the navigation to appear for logged in users.
I discovered that inside of ng-repeat directive expressions aren't evaluated which is why the function wasn't affecting the navigation state. to make the navigation state change I created another array of objects inside my navigation controller like this:

  $this.loggedInLinks = [
    {name: 'About-us', ref:'about', title: 'About DeafandHoh Page'},
    {name: 'Facts', ref: 'facts', title: 'Facts &amp; Deaf Empowerment Page'},
    {name: 'News', ref: 'news', title: 'News Page'},
    {name: 'Products', ref: 'products', title: 'Products Page'},
    {name: 'Directory', ref: 'directory', title: 'Directory Listings Page'},
    {name: 'Resources', ref: 'resources', title: 'Resources Page'},
    {name: 'Profile', ref: 'profile', title: 'User Profile Page'},
    {name: 'Chatroom', ref: 'chatroom', title: 'Come Chat!'},
    {name: 'Logout', ref: 'logout', title: 'Login &amp; Register Page'}
];


and to allow the state to change when the user logged in I attached a ng-hide to the default HTML navigation bar like so 

&lt;div class="hidden-xs" ng-hide="nav.userLoggedIn()"&gt;
    &lt;ul class="nav navbar-nav"&gt;
        &lt;li ng-repeat="nav in nav.defaultLinks"&gt;
            &lt;a title="{{nav.title}}" ui-sref="{{nav.ref}}" ng-bind="nav.name"&gt;&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;


And Replicated that in another HTML section but instead with ng-show for when the LoginService.loggedIn state changed to truthy

 &lt;div class="hidden-xs" ng-show="nav.userLoggedIn()"&gt;
      &lt;ul class="nav navbar-nav"&gt;
          &lt;li ng-repeat="nav in nav.loggedInLinks"&gt;
              &lt;a title="{{nav.title}}" ui-sref="{{nav.ref}}" ng-bind="nav.name"&gt;&lt;/a&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
&lt;/div&gt;


Now when a user logs in the navigation bar changes appropriately.