diff --git a/examples/demo-bind-to-single-property-async.html b/examples/demo-bind-to-single-property-async.html
new file mode 100644
index 000000000..1253a43bf
--- /dev/null
+++ b/examples/demo-bind-to-single-property-async.html
@@ -0,0 +1,82 @@
+
+
+
+
+ AngularJS ui-select
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Select2 theme
+ Single property binding with async data
+ Selected: {{personAsync.selected}}
+
+ {{$select.selected.name || $select.selected}}
+
+
+
+ email: {{person.email}}
+ age:
+
+
+
+ Data will be populated in 3 secs
+
+
+
+
diff --git a/examples/demo.js b/examples/demo.js
index 75f26bd5f..cee0509bb 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -36,10 +36,10 @@ app.filter('propsFilter', function() {
}
return out;
- }
+ };
});
-app.controller('DemoCtrl', function($scope, $http) {
+app.controller('DemoCtrl', function($scope, $http, $timeout) {
$scope.disabled = undefined;
$scope.enable = function() {
@@ -66,6 +66,24 @@ app.controller('DemoCtrl', function($scope, $http) {
};
+ $scope.personAsync = {selected : "wladimir@email.com"};
+ $scope.peopleAsync = [];
+
+ $timeout(function(){
+ $scope.peopleAsync = [
+ { name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States' },
+ { name: 'Amalie', email: 'amalie@email.com', age: 12, country: 'Argentina' },
+ { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
+ { name: 'Adrian', email: 'adrian@email.com', age: 21, country: 'Ecuador' },
+ { name: 'Wladimir', email: 'wladimir@email.com', age: 30, country: 'Ecuador' },
+ { name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States' },
+ { name: 'Nicole', email: 'nicole@email.com', age: 43, country: 'Colombia' },
+ { name: 'Natasha', email: 'natasha@email.com', age: 54, country: 'Ecuador' },
+ { name: 'Michael', email: 'michael@email.com', age: 15, country: 'Colombia' },
+ { name: 'Nicolás', email: 'nicole@email.com', age: 43, country: 'Colombia' }
+ ];
+ },3000);
+
$scope.person = {};
$scope.people = [
{ name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States' },
diff --git a/src/select.js b/src/select.js
index f885e4b96..75f710231 100644
--- a/src/select.js
+++ b/src/select.js
@@ -188,6 +188,8 @@
} else {
// Regular case
setItemsFn(items);
+ ctrl.ngModel.$modelValue = null; //Force scope model value and ngModel value to be out of sync to re-run formatters
+
}
}
@@ -370,6 +372,8 @@
return inputValue;
});
+ //Set reference to ngModel from uiSelectCtrl
+ $select.ngModel = ngModel;
//Idea from: https://github.com/ivaynberg/select2/blob/79b5bf6db918d7560bdd959109b7bcfb47edaf43/select2.js#L1954
var focusser = angular.element("");
diff --git a/test/select.spec.js b/test/select.spec.js
index e2b331e43..eba1a68ea 100644
--- a/test/select.spec.js
+++ b/test/select.spec.js
@@ -1,13 +1,14 @@
'use strict';
describe('ui-select tests', function() {
- var scope, $rootScope, $compile;
+ var scope, $rootScope, $compile, $timeout;
beforeEach(module('ngSanitize', 'ui.select'));
- beforeEach(inject(function(_$rootScope_, _$compile_) {
+ beforeEach(inject(function(_$rootScope_, _$compile_, _$timeout_) {
$rootScope = _$rootScope_;
scope = $rootScope.$new();
$compile = _$compile_;
+ $timeout = _$timeout_;
scope.selection = {}
scope.getGroupLabel = function(person) {
return person.age % 2 ? 'even' : 'odd';
@@ -376,6 +377,29 @@ describe('ui-select tests', function() {
expect(getMatchLabel(el)).toEqual('Samantha');
});
+ it('should parse the model correctly using property of alias with async choices data', function() {
+ var el = compileTemplate(
+ ' \
+ {{$select.selected.name}} \
+ \
+ \
+ \
+ \
+ '
+ );
+ $timeout(function() {
+ scope.peopleAsync = scope.people;
+ });
+
+ scope.selection.selected = 'Samantha';
+ scope.$digest();
+ expect(getMatchLabel(el)).toEqual('');
+
+ $timeout.flush(); //After choices populated (async), it should show match correctly
+ expect(getMatchLabel(el)).toEqual('Samantha');
+
+ });
+
//TODO Is this really something we should expect?
it('should parse the model correctly using property of alias but passed whole object', function() {
var el = compileTemplate(