angular-ui · dimirc · Aug 3, 2014 · Aug 1, 2014
diff --git a/examples/demo-bind-to-single-property-async.html b/examples/demo-bind-to-single-property-async.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="demo">
+<head>
+  <meta charset="utf-8">
+  <title>AngularJS ui-select</title>
+
+  <!--
+    IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
+    For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
+  -->
+  <!--[if lt IE 9]>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
+    <script>
+      document.createElement('ui-select');
+      document.createElement('ui-select-match');
+      document.createElement('ui-select-choices');
+    </script>
+  <![endif]-->
+
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
+
+  <!-- ui-select files -->
+  <script src="../dist/select.js"></script>
+  <link rel="stylesheet" href="../dist/select.css">
+
+  <script src="demo.js"></script>
+
+  <!-- Select2 theme -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
+
+  <!--
+    Selectize theme
+    Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
+  -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
+  <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
+  <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->
+
+  <style>
+    body {
+      padding: 15px;
+    }
+
+    .select2 > .select2-choice.ui-select-match {
+      /* Because of the inclusion of Bootstrap */
+      height: 29px;
+    }
+
+    .selectize-control > .selectize-dropdown {
+      top: 36px;
+    }
+  </style>
+</head>
+
+<body ng-controller="DemoCtrl">
+  <script src="demo.js"></script>
+
+  <button class="btn btn-default btn-xs" ng-click="enable()">Enable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
+
+  <h3>Select2 theme</h3>
+  <h4>Single property binding with async data</h4>
+  <p>Selected: {{personAsync.selected}}</p>
+  <ui-select ng-model="personAsync.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name || $select.selected}}</ui-select-match>
+    <ui-select-choices repeat="person.email as person in peopleAsync | propsFilter: {name: $select.search, age: $select.search}">
+      <div ng-bind-html="person.name | highlight: $select.search"></div>
+      <small>
+        email: {{person.email}}
+        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
+      </small>
+    </ui-select-choices>
+  </ui-select>
+  <small>Data will be populated in 3 secs</small>
+
+</body>
+
+</html>
diff --git 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
@@ -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("<input ng-disabled='$select.disabled' class='ui-select-focusser ui-select-offscreen' type='text' aria-haspopup='true' role='button' />");

diff --git 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(
+      '<ui-select ng-model="selection.selected"> \
+        <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+        <ui-select-choices repeat="person.name as person in peopleAsync | filter: $select.search"> \
+          <div ng-bind-html="person.name | highlight: $select.search"></div> \
+          <div ng-bind-html="person.email | highlight: $select.search"></div> \
+        </ui-select-choices> \
+      </ui-select>'
+    );
+    $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(