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 & 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 & 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 & 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 & Register Page', show: 'nav.userLoggedIn()'}

The HTML looks like this:

 <li ng-repeat="nav in nav.navLinks">
 <a title="{{nav.title}}" ui-sref="{{nav.ref}}" ng-bind="nav.name" ng-hide="nav.hide" ng-show="nav.show"></a>
 </li>

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.