Edit in JSFiddle

var demo = angular.module('demo', []);

demo.directive('userGroupSwitcher', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
        template: '<form class="userGroup"><label for="userGroupSelect">Select a Group</label><select ng-model="currentGroup" ng-options="o.value as o.label for o in myGroups" /><input type="button" ng-click="applyNewGroup(currentGroup)" value="Switch Group"/></form>'
    };
});
               
function MyCtrl ($scope, $rootScope) {
    $rootScope.myGroups = [
        {label:'Admin', value:1},
        {label:'Users', value:2},
        {label:'Public', value:3}
    ];
    
    $scope.$on("new group", function(obj, value) {
        console.log("Global group switched to " + JSON.stringify(value));
    });
    
    $scope.applyNewGroup = function (currentGroup) {
        $rootScope.$broadcast("new group", currentGroup);
    };
        
}

<div ng-app='demo' ng-controller='MyCtrl'>
    <p>You've just selected {{group}}.</p>
    <user-group-switcher />
</div>

form.userGroup {
    width: 300px;
    height: auto;
    border: 2px solid black;
    background-color: lightyellow;    
}
form.userGroup label {
    margin-left: 10px;
    color: blue;
}