Whats the most appropriate way to address multiple(non-nested) dynamically generated URL states on a large single page application

I am continuing work on a large single page application for viewing results from our database. There are a total of 10 different select options to chose from before clicking the search button. It was built in codeigniter / angular so naturally it uses Ajax to fetch all the data.

Now my boss has decided he wants "sharable" urls added like the old system had (it used get parameters) and I was told angular-ui-router was the way to go to handle urls on larger single page web apps. I have some code written that currently replaces the url state in the address bar when a dropdown option is selected and it works but since its not using nested states it simply overrides it when another is selected. Before I go down the road of 10 deep nested states, would there be a solution to append the next part of the url onto the existing without overriding?

app.config(function($stateProvider) {
    $stateProvider
        .state('stateone', {
            url: '/:key/:value',
        });
     });

$scope.changedValue=function(key, value){
    console.log("Key:"+key+" Value:"+value);
    $state.go('stateone', {
        key: key,
        value: value
    });
}

<select ng-model="excess_state.value" ng-change="changedValue('excess', excess_state.value)">
    <option ng-repeat="state in excess_state" value="{{state.value}}">
    </option>
</select>

for clarification: when a dropdown named "excess" has option of "yes" selected the url would be: index/excess/yes/

When the next dropdown named "inventory" has option of "3" selected the url should become: index/excess/yes/inventory/3/

right now it just overrides to index/inventory/3/

since this code only needs to change the ng-selected option when its called from the url, the state itself doesn't serve much of a purpose beyond the standard get parameter.

I hope I have made myself clear enough, any suggestions would be greatly appreciated!