I have these items on my scope:

```
$scope.states = [ 
    { StateAbbr: 'CA', StateName: 'California' },  
    { StateAbbr: 'MI', StateName: 'Michigan' }  ];

$scope.counties = [  
    { CountyName: 'ALCONA', StateAbbr: 'MI'  },  
    { CountyName: 'BENZIE', StateAbbr: 'MI' },  
    { CountyName: 'CHIPPEWA', StateAbbr: 'MI' },  
    { CountyName: 'IONIA', StateAbbr: 'MI' },
    { CountyName: 'KEWEENAW', StateAbbr: 'MI' },  
    { CountyName: 'Los Angeles', StateAbbr: 'CA' },  
    { CountyName: 'MACKINAC', StateAbbr: 'MI' },  
    { CountyName: 'Orange', StateAbbr: 'CA' },  
    { CountyName: 'Riverside', StateAbbr: 'CA' },  
    { CountyName: 'San Bernardino', StateAbbr: 'CA' },  
    { CountyName: 'San Diego', StateAbbr: 'CA' },  
    { CountyName: 'SCHOOLCRAFT', StateAbbr: 'MI' },  
    { CountyName: 'Ventura', StateAbbr: 'CA' }  ];

$scope.filterDefaults = function() {
    $scope.orderFilter = {};
    $scope.orderFilter.selectedState = '';
    $scope.orderFilter.selectedCounty = '';
};
$scope.filterDefaults();

```

the markup: 

```
<label>State</label>
<select data-ui-select2="select2Options" name="stateName" data-ng-model="orderFilter.selectedState" data-placeholder="Choose a state…">
    <option value=""></option>
    <option data-ng-repeat="s in states" value="{{s.StateAbbr}}">{{s.StateName}}</option>
</select>

<label>County</label>
<select data-ui-select2="select2Options" name="countyName" data-ng-model="orderFilter.selectedCounty" data-placeholder="Choose a county…" data-ng-disabled="orderFilter.selectedState == '' " >
    <option value=""></option>
    <option data-ng-repeat="c in counties | filter:orderFilter.selectedState" value="{{c.CountyName}}">{{c.CountyName}}</option>
</select>

```

How to I correctly set up the filter so that the counties are filtered by the state? 

Thank you,
Stephen