Andy Johnson Andy Johnson - 1 month ago 7
AngularJS Question

One scope object for multiple ui-select dropdown

I am having little difficulty using the ui-select on angular. I want to populate three dropdowns for first name, second name and third name using the same users scope object. Looks like angular doesn't like it..

Here is my controller looks like.. initially I only assigned $scope.members variable and try to populate the dropdown using the same object but selecting first also selects other. So I decided to assign it to three different object but it still does the same..

memberService.getAllMembers().then(function (data) {
$scope.members_first_name = data;
$scope.members_second_name = data;
$scope.members_third_name = data;

Here is my html..

<!-- First Name -->
<div class="form-group required" ng-class="{ 'has-error': addEditInvestmentForm.first_name.$invalid, 'has-success':!addEditInvestmentForm.first_name.$invalid}">
<label for="first_name" class="control-label col-xs-4">First Name</label>
<div class="col-xs-8">
<ui-select required ng-model="members_first_name.selected" ui-select-required theme="bootstrap" style="width: 300px;" title="Select First Name" name="first_name" id="first_name" required>
<ui-select-match placeholder="Select or search First Name...">{{members_first_name.selected.full_name}}</ui-select-match>
<ui-select-choices repeat="member_f in members_first_name | filter: $">
<span ng-bind-html="member_f.full_name| highlight: $"></span>
<div ng-show="addEditInvestmentForm.$submitted || addEditInvestmentForm.first_name.$touched" ng-messages="addEditInvestmentForm.first_name.$error">
<div ng-message="required" class="validationErrorMessage">First Name is required</div>

<!-- Second Name -->
<div class="form-group required" ng-class="{ 'has-error': addEditInvestmentForm.second_name.$invalid, 'has-success':!addEditInvestmentForm.second_name.$invalid}">
<label for="second_name" class="control-label col-xs-4">Second Name</label>
<div class="col-xs-8">
<ui-select required ng-model="members_second_name.selected" ui-select-required theme="bootstrap" style="width: 300px;" title="Select Second Name" name="second_name" id="second_name" required>
<ui-select-match placeholder="Select or search Second Name...">{{members_second_name.selected.full_name}}</ui-select-match>
<ui-select-choices repeat="member_s in members_second_name | filter: $">
<span ng-bind-html="member_s.full_name| highlight: $"></span>
<div ng-show="addEditInvestmentForm.$submitted || addEditInvestmentForm.second_name.$touched" ng-messages="addEditInvestmentForm.second_name.$error">
<div ng-message="required" class="validationErrorMessage">Second Name is required</div>

Here is what happens:

enter image description here

Selecting the first one selects the second and vice versa..


I've run into this problem several times. If you want to use the same data twice use:


If you attach the same data object to the scope anytime you change one scope variable it will affect the other because they are both tied to the same variable.