AngularJS: Bind UI Select selection sequentially


I felt lucky to work with angularJS with the integration with SharePoint(as backend) in my recent project. There was a requirement to have two drop-downs on a single page application where on selection of one; other drop-down value will be automatically filtered.  I am going to share with you guys that how I have implemented.  I understand that this may not be Ideal way of doing it but I am sure that it is quickest solution that I did in code to achieve this requirement.

HTML: The below html will generate two dropdowns and populate with country and states data.

<ui-select ng-model="" name="country" theme="bootstrap" title="Select a Country" >
<ui-select-match placeholder="Select or search a country in the list...">{{$}}</ui-select-match>
<ui-select-choices repeat="country in ctrl.countries | filter: $">
<span ng-bind-html=" | highlight: $"></span>
<small ng-bind-html="country.code | highlight: $"></small>
<ui-select ng-model="ctrl.state.selected" name="state" theme="bootstrap" title="Select a state">
<ui-select-match placeholder="Select or search a state in the list...">{{$}}</ui-select-match>
<ui-select-choices repeat="s in ctrl.states | countryFilter: { concode: }">
<span ng-bind-html=" | highlight: $"></span>
<small ng-bind-html="s.concode | highlight: $"></small>
<span ng-if="">&nbsp; No state found for '{{}}' country !</span>
<span ng-if="!">&nbsp; Please select country !</span>

Custom Filter:

If you have notice in abouve html code, I have created a custom search filter which search the states dropdown data based on the countyr selected using first dropdown. Here is the code for the filter:

app.filter("countryFilter", function () {
return function (items, props) {
var out = [];
if (angular.isArray(items)) {
var keys = Object.keys(props);
items.forEach(function (item) {
var itemMatches = false;
for (var i = 0; i < keys.length; i++) {
var prop = keys[i];
var text = props[prop].toLowerCase();
//if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
if (item[prop].toString().toLowerCase() === text) {
itemMatches = true;
if (itemMatches) {
} else {
// Let the output be the input untouched
out = items;
return out;

Demo: Plunker Demo



Hope this post will help you creating synchronous drop down using UI-Select.

Happy Coding !!