I've developed a directive that includes a dropdown list of organizations to which the user is assigned:
.directive('orgList', ['$rootScope', '$state', 'Auth', 'ipCookie', function ($rootScope, $state, Auth, ipCookie) {
return {
restrict: 'A',
replace: true,
template: '<div class="form-group"><div class="input-group">'+
'<span class="input-group-addon"><b>My Organizations</b></span>'+
'<select class="form-control" ng-model="selectedOrg"'+
'ng-options="org.name for org in orgs"></select>'+
'</div></div>',
link: function(scope, elem, attrs) {
scope.orgs = Auth.user.organizations;
scope.selectedOrg = ipCookie('selectedOrg') || _.first(scope.orgs);
scope.$watch('selectedOrg', function (value) {
if(!_(value).isEmpty()) {
ipCookie('selectedOrg', value);
var temp = {
role: Auth.userRoles[value.role] || Auth.user.role
}
_(Auth.user).extend(temp);
$rootScope.$broadcast('userRoleChanged', value.id);
}
});
scope.$on('userRoleChanged', function (event, id) {
if(!Auth.authorize(Auth.accessLevels.admin)) {
if($state.current.url.match('/organization/')) {
$state.go('private.profile');
}
}
});
}
}
}
}])
My next objective is to store the user's organization selection for future visits: after the user chooses an organization from the dropdown, I want them to see the same organization when they revisit the page.
Here's the issue at hand:
scope.selectedOrg = ipCookie('selectedOrg') || _.first(scope.orgs);
If the cookie is not defined and the _.first(scope.orgs) part is selected, the dropdown displays the organization as expected. However, if I retrieve the value from the cookie, the dropdown appears empty. console.log() confirms that the selectedOrg is correct in both scenarios.