title: AngularJS and UI-Select multiple with data
body: <p>Good afternoon!</p>
  
  <p>I'm trying to use UI-Select to populate the form, associated with model. Model data is received from server using the controller in the following way:</p>
  
  <pre><code>&lt;form action="index.php" method="post" class="form-horizontal" ng-controller="WorkPlanController as ctrl" ng-init="init(6)"&gt;
  
  &lt;!-- this work perfectly! --&gt;
      &lt;textarea name="workplan_approver_post" ng-model="workplan.approver_post"&gt;&lt;/textarea&gt;
  
  &lt;!-- here I have troubled --&gt;
  &lt;div ng-controller="LookupController as lookupCtrl" ng-init="lookupCtrl.initLookup('corriculum_speciality_directions')"&gt;
  &lt;ui-select ng-disabled="disabled" multiple ng-model="workplan.profiles" theme="select2"&gt;
  &lt;ui-select-match placeholder="Выберите значение из списка"&gt;{{$item.value}}&lt;/ui-select-match&gt;
  &lt;ui-select-choices repeat="item.key as item in items track by $index | filter: $select.search"&gt;
  &lt;div ng-bind-html="item.value | highlight: $select.search"&gt;&lt;/div&gt;
  &lt;/ui-select-choices&gt;
  &lt;/ui-select&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>WorkPlanController is a simple REST-service:</p>
  
  <pre><code>application
      .controller("WorkPlanController", [
          '$scope',
          'WorkPlan',
      function($scope, workPlanFactory){
          $scope.workplan;
          $scope.workplan = {
              profiles: []
          };
          $scope.init = function($id){
              workPlanFactory.get({id: $id}, function(data){
                  $scope.workplan = data;
              });
          };
  
          $scope.save = function(){
              $scope.workplan.$save();
          }
      }]);
  
  application
      .factory('WorkPlan', function($resource){
          return $resource(web_root + "_modules/_corriculum/workplans.php", {
              model: "CWorkPlan",
              type: "json"
          }, {
              get: {
                  method: "GET",
                  params: {
                      id: '@id',
                      action: "get"
                  }
              }
          });
      });
  </code></pre>
  
  <p>Server takes WorkPlan object in the following way:</p>
  
  <pre><code>{"id":"5","title":"title","department_id":"0","approver_post":"","approver_name":"","discipline_id":"402","corriculum_discipline_id":"566","direction_id":"79","qualification_id":"220","education_form_id":"0","year":"2015","author_id":"311","profiles":[]}
  </code></pre>
  
  <p>Also I use a LookupController which is the same:</p>
  
  <pre><code>application
      .factory("LookupCatalog", function($resource){
          return $resource(web_root + "_modules/_search/", {
  
          }, {
              query: {
                  method: "GET",
                  isArray: true,
                  params: {
                      catalog: '@catalog',
                      action: "NgLookupViewData"
                  }
              }
          });
      })
      .controller("LookupController", [
          '$scope',
          'LookupCatalog',
          function ($scope, lookupCatalog) {
              $scope.items;
  
              this.initLookup = function (glossary) {
                  lookupCatalog.query({catalog: glossary}, function(data) {
                      $scope.items = data;
                  });
              }
          }
      ]);
  </code></pre>
  
  <p>LookupController receives data in the following form:</p>
  
  <pre><code>[{"key":429,"value":"data1"},{"key":430,"value":"data2"},{"key":1743,"value":"data3"},{"key":1744,"value":"data4"},{"key":1852,"value":"data5"}]
  </code></pre>
  
  <p>And everything looking good then ng-model workplan.profiles property is empty:</p>
  
  <p><a href="http://joxi.ru/n2YR57wS4jwOA6" rel="nofollow">http://joxi.ru/n2YR57wS4jwOA6</a></p>
  
  <p>Then I save data to the server, Angular send POST with the following data:</p>
  
  <pre><code>{"id":"5","title":"title","department_id":"0","approver_post":"","approver_name":"","discipline_id":"402","corriculum_discipline_id":"566","direction_id":"79","qualification_id":"220","education_form_id":"0","year":"2015","author_id":"311","profiles":[430,430]}
  </code></pre>
  
  <p>I see, that profiles is array of keys and it is in proper form. But when I try to load this data back to model and populate a form I get a lot of js-errors:</p>
  
  <pre><code>Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: $item in $select.selected, Duplicate key: undefined:undefined, Duplicate value: undefined
  http://errors.angularjs.org/1.3.2/ngRepeat/dupes?p0=%24item%20in%20%24select.selected&amp;p1=undefined%3Aundefined&amp;p2=undefined
      at REGEX_STRING_REGEXP (angular.js:80)
      at ngRepeatAction (angular.js:24167)
      at Object.$watchCollectionAction [as fn] (angular.js:13909)
      at Scope.$get.Scope.$digest (angular.js:14042)
      at Scope.$get.Scope.$apply (angular.js:14304)
      at angular.js:16035
      at completeOutstandingRequest (angular.js:4842)
      at angular.js:5215
  angular.js:11383 TypeError: Cannot read property 'search' of undefined
      at uis.directive.link.ngModel.$formatters.unshift.checkFnMultiple (angular-select.js:1111)
      at Array.&lt;anonymous&gt; (angular-select.js:1125)
      at Object.ngModelWatch (angular.js:20669)
      at Scope.$get.Scope.$digest (angular.js:14034)
      at Scope.$get.Scope.$apply (angular.js:14304)
      at done (angular.js:9518)
      at completeRequest (angular.js:9703)
      at XMLHttpRequest.requestLoaded (angular.js:9646)
  </code></pre>
  
  <p><a href="http://dl2.joxi.net/drive/0009/3267/613571/150315/90c1afa060.jpg" rel="nofollow">http://dl2.joxi.net/drive/0009/3267/613571/150315/90c1afa060.jpg</a></p>
  
  <p>But I already add track by condition to ui-select-choices' repeat! What should I do to make it work properly?</p>