Modifying directive property from outside - angularjs

Question

So, I have a question that I am unsure of how to even ask. I have a property that I am setting in a directive's controller by an auth0 library (code to follow). I need to modify that property from another app controller.
Specifically, the use case is around being logged in/logged out. When the user is logged in, and they click the logout button, I can set the value of the property, not a problem. But when they are not logged in, and they log in, I can't set that property in the directive from the login controller.
Directive:
angular
.module('app')
.directive('loginLogout', loginLogout);
function loginLogout() {
var directive = {
...
scope: {
loggedin: '='
},
controller: loginLogoutController,
controllerAs: 'vm',
bindToController: true
};
return directive;
function loginLogoutController(auth,store,$location,toastr,$parse ) {
var vm = this;
vm.logout = logUserOut;
vm.loggedin = auth.isAuthenticated;
function logUserOut() {
auth.signout();
...
vm.loggedin = false;
}
}
}
Login Controller:
(abbreviated)
function LoginController(auth, store, $location, toastr) {
var vm = this;
vm.login = function () {
auth.signin({}, loginSuccess, loginFailure);
function loginSuccess(profile, token){
...
// ========== I want to set the value of vm.loggedin from the directive here.
}
function loginFailure(){
...
}
};
}
I have tried things like $parse, and setting tinkering with the isolated scope on the directive config. No luck. Any help is appreciated.

Answer 1

You could try using $rootScope.$broadcast and $scope.$on for such communication.
You have used controllerAs to avoid injecting $scope. Ofcourse this would need injecting $scope in controller. However using $scope in such specific cases (that is when controllerAs is used) may not be all that bad idea (https://github.com/toddmotto/angularjs-styleguide).
Login Controller:
function LoginController(auth, store, $location, toastr) {
var vm = this;
vm.login = function () {
auth.signin({}, loginSuccess, loginFailure);
function loginSuccess(profile, token){
...
// ========== I want to set the value of vm.loggedin from the directive here.
$rootScope.$broadcast('loginCheck');
}
function loginFailure(){
...
}
};
}
Directive
function loginLogoutController(auth,store,$location,toastr,$parse ) {
var vm = this;
vm.logout = logUserOut;
vm.loggedin = auth.isAuthenticated;
function logUserOut() {
auth.signout();
...
vm.loggedin = false;
}
$scope.$on('loginCheck', function(event, args) {
// Set vm.loggedin
});
}

Answer 2

What i can think of now, You can use angular.js function binding.
.directive('loginLogout', loginLogout);
function loginLogout() {
var directive = {
...
scope: {
loggedin: '=',
confirmAction: '&'
},
controller: loginLogoutController,
controllerAs: 'vm',
bindToController: true
};
<!--In html-->
<login-logout confirm-action="doSomething()"> </login-logout>
function LoginController(auth, store, $location, toastr) {
var vm = this;
vm.login = function () {
auth.signin({}, loginSuccess, loginFailure);
function loginSuccess(profile, token){
...
// call doSomething here
doSomething()
}
function loginFailure(){
...
}
};
}