Sample drop-down binding

Providing a drop-down of keys and values without a directive.

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<div ng-app='demo' ng-controller='MyCtrl'>
    <p>You've just selected {{group}}.</p>
    <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>    
</div>

CSS

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

JavaScript

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

demo.directive('userGroupSwitcher', function() {
    
});
               
function MyCtrl ($scope, $rootScope) {
    $scope.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);
    };
        
}