Dynamically rendered sidebar view / template when user logs in?

I am working on a web application with basic registration / login functionality, a navbar that appears on every page, and several views for various other functionality. I am using ui.router for my routing and Bootstrap for my style and grid.

I want to add functionality that makes the sidebar appear on the side of each view after a user logs in. All views are available to the user regardless of whether they are logged in or not, but the sidebar will not be present if they are logged in. I tried to implement this in several ways and finally decided to use the ui.router multiple views function to accomplish it, although I was unable to get it working correctly, my most up-to-date code is below.

Current implementation:

In my routeConfig, each state has a sidebar view and content view. The sidebar view url template should either be null (if the user is logged out) or the location of my sidebar.html (if the user is logged in). As it currently does, this doesn't work at all and just breaks those states completely.

The "content" views are loaded with ng-class functions that dynamically change their bootstrapped grid width based on whether the user was logged in or not, so this part works fine.

index.html

<!-- snip -->
<div class="container">

  <div ui-view="sidebar"></div>
  <div ui-view="content"></div>

</div>
<!-- snip -->

      

        
        
        
      

    

app.routes.js

(function() {
  'use strict';

  angular
    .module('app', ['ui.router', 'ui.bootstrap']);
    .config(routeConfig);

  function routeConfig($stateProvider, $urlRouterProvider, userFactoryProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('main', {
        url:'/main/',
        views: {
          'sidebar': {
            templateUrl: function() {
              return userFactoryProvider.getSidebarLink()
            }
          }
          'content': {
            templateUrl: 'app/components/main/main.html',
            controller: 'MainController as main'
          }
        }
      })
      /* snip - other states */
  }
})();

      

        
        
        
      

    

user.factory.js

(function() {
  'use strict';

  angular
    .module('app')
    .factory('userFactory', userFactory);

  function userFactory() {
    var _loggedIn = false;
    // will be either null or the location of sidebar.html depending on if user is _loggedIn or not
    var _sidebarLink = null;

    var service = {
      getSidebarLink: getSidebarLink
      // snip - other functions
    };
    return service;

    // snip - login/logout functions that modify _loggedIn

    function getSidebarLink() {
      if (_loggedIn) {
        _sidebarLink = 'app/components/navbar/sidebar.html'
      }
      // null if not logged in, sidebar.html location if logged in
      return _sidebarLink;
    }

  }

})();