How do you clear an array with selected values so that values can return to the select?

I have a people array. The people array values are available in select. When I choose names, they are transferred to the multipleDemo array. And you can not reselect them from select because they disappear and are moved to the multipleDemo array. With the Delete button I have to delete all elements from the multipleDemo array (except the first element) into the people array. So that you can again choose a name from the select. Error in function $clearTag.

Expecting behavior:

  1. Select: Wladimir
  2. Appear tag Wladimir
  3. Select Wladimir (You can’t choose Wladimir because he is already chosen)
  4. Click Delete. Cut elements(tags) with multipleDemo array and put them in array people
  5. You can again select Wladimir

Here is my code:


<!DOCTYPE html>
<html lang="en" ng-app="demo">
  <meta charset="utf-8">
  <title>AngularJS ui-select</title>

  <script src=""></script>
  <script src=""></script>
  <link rel="stylesheet" href="">

  <!-- ui-select files -->
  <script src="select.js"></script>
  <link rel="stylesheet" href="select.css">

  <script src="demo.js"></script>

  <!-- Select2 theme -->
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="">

    body {
      padding: 15px;

    .select2 > .select2-choice.ui-select-match {
      /* Because of the inclusion of Bootstrap */
      height: 29px;

    .selectize-control > .selectize-dropdown {
      top: 36px;
<body ng-controller="DemoCtrl">

  <h3>Array of strings</h3>
  <button ng-click='clearTag()'>Delete</button>
  <ui-select tagging tagging-label="new tag" multiple ng-model="multipleDemo" 
  on-select="OnClickSelect($item)" on-remove="OnRemoveSelect($item)"
  theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select name...">{{$}}</ui-select-match>
    <ui-select-choices  repeat="item in people | filter:$">
  <p>Selected: {{multipleDemo}}</p>



app.controller('DemoCtrl', function($scope, $http, $timeout) {
  $scope.multipleDemo =[];
    $scope.people = [
    { name: 'Adam',      email: '[email protected]',      age: 12, country: 'United States' },
    { name: 'Amalie',    email: '[email protected]',    age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: '[email protected]', age: 21, country: 'Argentina' },
    { name: 'Adrian',    email: '[email protected]',    age: 21, country: 'Ecuador' },
    { name: 'Wladimir',  email: '[email protected]',  age: 30, country: 'Ecuador' },
    { name: 'Samantha',  email: '[email protected]',  age: 30, country: 'United States' },
    { name: 'Nicole',    email: '[email protected]',    age: 43, country: 'Colombia' },
    { name: 'Natasha',   email: '[email protected]',   age: 54, country: 'Ecuador' },
    { name: 'Michael',   email: '[email protected]',   age: 15, country: 'Colombia' },
    { name: 'Nicolás',   email: '[email protected]',    age: 43, country: 'Colombia' }


  $scope.OnRemoveSelect = function(item) { 
   var index = $scope.people.indexOf(;
   $scope.people.splice(index, 1); 

  $scope.clearTag = function() {
    for(var i =0; i < $scope.multipleDemo.length; i++) {
      $scope.multipleDemo.splice($scope.multipleDemo[i], 1000);

Source: AngularJS