Fix multiselect population (Issue #333)

examples/demo-multi-select.html

@@ -177,6 +177,24 @@ <h3>Array of objects (with groupBy)</h3>
   </ui-select>
   <p>Selected: {{multipleDemo.selectedPeopleWithGroupBy}}</p>
 
+  <hr>
+  <h3>Populate multi select</h3>
+  <p>
+    <button ng-click="populate([{name: 'Adam', email: '[email protected]', age: 12, country: 'United States'}])">Populate 'Adam'</button>
+    <button ng-click="populate([{name: 'Adam', email: '[email protected]', age: 12, country: 'United States'}, {name: 'Estefanía', email: '[email protected]', age: 21, country: 'Argentina'}])">Populate 'Adam' and 'Estefanía'</button>
+  </p>
+  <ui-select multiple ng-model="multipleDemo.populateSelection" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;">
+      <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
+      <ui-select-choices repeat="person.email as person in people | 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>
+  <p>Selected: {{multipleDemo.populateSelection}}</p>
+
   <div style="height:500px"></div>
 
 </body>

examples/demo.js

@@ -140,6 +140,18 @@ app.controller('DemoCtrl', function($scope, $http, $timeout) {
     });
   };
 
+  $scope.populate = function(persons) {
+    if (!persons) {
+      return;
+    }
+    $scope.multipleDemo.populateSelection = [];
+    $timeout(function() {
+      angular.forEach(persons, function(value) {
+        $scope.multipleDemo.populateSelection.push(value);
+      });
+    });
+  };
+
   $scope.country = {};
   $scope.countries = [ // Taken from https://gist.github.com/unceus/6501985
     {name: 'Afghanistan', code: 'AF'},

src/select.js

@@ -658,18 +658,45 @@
 
         //From model --> view
         ngModel.$formatters.unshift(function (inputValue) {
-          var data = $select.parserResult.source (scope, { $select : {search:''}}), //Overwrite $search 
+          var data = $select.parserResult.source (scope, { $select : {search:''}}), //Overwrite $search
               locals = {},
               result;
           if (data){
             if ($select.multiple){
-              var resultMultiple = [];
+              var resultMultiple = [],
+                parseValue,
+                unshiftResult;
               var checkFnMultiple = function(list, value){
                 if (!list || !list.length) return;
                 for (var p = list.length - 1; p >= 0; p--) {
+                  unshiftResult = false;
                   locals[$select.parserResult.itemName] = list[p];
                   result = $select.parserResult.modelMapper(scope, locals);
-                  if (result == value){
+                  locals[$select.parserResult.itemName] = value;
+                  parseValue = $select.parserResult.modelMapper(scope, locals);
+
+                  if (parseValue) {
+                    if (angular.isObject(result)) {
+                      if (angular.equals(result, parseValue)) {
+                        unshiftResult = true;
+                      }
+                    } else {
+                      if (result == parseValue) {
+                        unshiftResult = true;
+                      }
+                    }
+                  } else {
+                    if (angular.isObject(result)) {
+                      if (angular.equals(result, value)) {
+                        unshiftResult = true;
+                      }
+                    } else {
+                      if (result == value) {
+                        unshiftResult = true;
+                      }
+                    }
+                  }
+                  if (unshiftResult) {
                     resultMultiple.unshift(list[p]);
                     return true;
                   }