With the help of the official Angular-Material Docs found here, I have managed to add three autocomplete fields next to each other. However, I would like to bind the value selected from the first dropdown field to be automatically selected on the third dropdown field too.
What would be the best approach to binding the first autocomplete value to the third but NOT vice-versa?
The autocomplete of all three fields looks like this but each of them are wrapped in their own separate controllers:
<form ng-submit="$event.preventDefault()"> <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-min-length="1" md-floating-label="Final"> <md-item-template> <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span> </md-item-template> <md-not-found> No items matching "{{ctrl.searchText}}" were found. </md-not-found> </md-autocomplete> </form> And the JS which I copied from the example Docs:
app.controller('abcCtrl', abcCtrls); function abcCtrls ($timeout, $q, $log) { var self = this; self.simulateQuery = false; self.isDisabled = false; // list of `state` value/display objects self.states = loadAll(); self.querySearch = querySearch; self.selectedItemChange = selectedItemChange; self.searchTextChange = searchTextChange; self.newState = newState; function newState(state) { alert("Sorry! You'll need to create a Constituion for " + state + " first!"); } // ****************************** // Internal methods // ****************************** /** * Search for states... use $timeout to simulate * remote dataservice call. */ function querySearch (query) { var results = query ? self.states.filter( createFilterFor(query) ) : self.states, deferred; if (self.simulateQuery) { deferred = $q.defer(); $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false); return deferred.promise; } else { return results; } } function searchTextChange(text) { $log.info('Text changed to ' + text); } function selectedItemChange(item) { $log.info('Item changed to ' + JSON.stringify(item)); } /** * Build `states` list of key/value pairs */ function loadAll() { var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\ Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\ Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\ Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\ North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\ South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\ Wisconsin, Wyoming'; return allStates.split(/, +/g).map( function (state) { return { value: state.toLowerCase(), display: state }; }); } /** * Create filter function for a query string */ function createFilterFor(query) { var lowercaseQuery = angular.lowercase(query); return function filterFn(state) { return (state.value.indexOf(lowercaseQuery) === 0); }; } }; 
