<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
    <script data-require="angular-ui-select2@*" data-semver="0.0.2" src="https://raw.github.com/angular-ui/ui-select2/master/src/select2.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app ng-controller="controller">
    This plunkr demonstrates an issue with Angular-UI select2:<br/>
    <div style="border:1px solid grey">
      <select ui-select2 ng-model="selectedNames">
        <option ng-repeat="name in names">{{name}}</option>
      </select>
      <span>{{names.length}} names loaded.</span>
      <br/>
      <a href="#" ng-click="updateIn3Seconds()">Trigger update in 3 seconds</a>
      <span>{{msg}}</span>
    </div>
    
    <br/>
    <h3>Explanation</h3>
    This plunkr demonstrates an issue with Angular-UI select2:<br/>

    When select dropdown is open, updates to the model are not reflected.<br/>
    <br/>
    To see the issue:<br/>
    <ol>
      <li>Press the "Trigger" link below</li>
      <li>Open the select before countdown is over</li>
      <li>Once countdown is over, select will NOT be updated</li>
    </ol>
    
    Note that in order to update select user can close & open it - but that is not something we can ask the user to do for us...
    
    <br/>
    
    
  </body>

</html>

// Code goes here

function controller($scope,$timeout) {
  $scope.names = ["Ann","Bill","Carl","Don","Elena"];
  $scope.selectedNames=["Ann","Don"];
  
  $scope.count = 9;
  
  function countdown() {
    if ($scope.count<=0) {
      $scope.names.push("Fred");
      $scope.msg="Fred added";
    } else {
      $scope.count--;
      $scope.msg="Countdown:"+$scope.count;
      $timeout(countdown,333)
    }
  }
  $scope.updateIn3Seconds = function() {
    $timeout(countdown,333);
  }
}
/* Styles go here */