Having two modals on a page overrides one config.

[nick]

I have two directives that both encapsulate btfModals, each directive has a module like:

loginModalFactory = (btfModal) ->
  return btfModal(
    controller:   'loginModalController'
    controllerAs: 'modal'
    templateUrl: 'components/login/login.html'
  )

and

logOutModalFactory = (btfModal) ->
  return btfModal(
    controller:   'logOutModalController'
    controllerAs: 'modal'
    templateUrl: 'components/logOut/logOut.html'
  )

Both factories are wrapped in separate directives and modules which are then injected into my app. However, I can only see the stylings for the logOut modal whose encapsulating directive comes after the login directive. I understand that factories are singletons, so what is the recommended way to create multiple directives w/ multiple config objects?

Thank you,

[nick]

apparently my issue was with putting a modal in a directive with isolate scope. It works as intended when a controller uses two factories.