groups array doesn't populate when broker value is selected, need to use a different angular directive to catch the change?

controller.js

function getBrokerList() {
        var brokerList = ['All', 'A', 'B', 'C', 'D', 'E'];
        return brokerList;
    }


    $scope.$watch('brokerValue', function (selectedBroker) {
        $scope.groups = getBrokerGroupList(selectedBroker);
        console.log($scope.groups);
    });

    function getBrokerGroupList(selectedBroker) {
        if (selectedBroker === 'All') return '';
        switch (selectedBroker)
        {
            case 'A':
                return ['All', 'North', 'East', 'South', 'West'];
                break;
            case 'B':
                return ['All', 'Earth', 'Wind', 'Fire', 'Water'];
                break;
            default:
                return ['No groups'];
        }  
    };

form.html

<div class="form-search" ng-controller="BrokerSalesController">
<div class="control-group" ng-show="getUserRole()">
  <label class="control-group" for="brokerDropdown">Select Broker:</label>
  <select id="brokerDropDown" ng-model="brokerValue" ng-options="broker for broker in brokers"></select>
</div>
<div class="control-group" ng-show="groups.length > 0">
  <label class="control-group" for="brokerGroupsDropDown">Select Broker Group:</label>
  <select id="brokerGroupsDropDown" ng-model="groups" ng-option="group for group in groups"></select>
</div>
</div>