angularjs - select2 - tagging with objects

http://angularjs.org/

HTML

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/css/bootstrap.css" rel="stylesheet">
      
  <link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.0/select2.css" rel="stylesheet"/>
      
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
 
        <script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.0/select2.min.js"></script>
      
  <script src="https://raw.github.com/angular-ui/ui-select2/master/src/select2.js"></script>



<div style="border: 1px solid red;margin-bottom:10px;"> angular-ui + select2
    <div ng-controller="MyCtrl">
        
        <input type="text"  ui-select2="tagAllOptions" ng-model="tagsSelection" style="width:300px;" />
        <pre>
            tagsSelection: {{tagsSelection | json}}
        </pre>
    </div>    
</div>        
    </div>
</div>

JavaScript

var myApp = angular.module('myApp', ['ui.select2']);

function MyCtrl($scope, $timeout) {

    // Initialize with Objects.
    $scope.tagsSelection = [
        {"id": "01", "text": "Perl"},
        {"id": "03", "text": "JavaScript"}
    ];       

    $timeout(function(){
        $scope.tagsSelection.push({'id': '02', 'text': 'Java'});
    }, 3000);
            
    $scope.tagData = [{
        "id": "01",
        "text": "Perl"
    },
    {
        "id": "02",
        "text": "Java"
    },
    {
        "id": "03",
        "text": "JavaScript"
    },
    {
        "id": "04",
        "text": "Scala"
    }];
        
    $scope.tagAllOptions = {
        multiple: true,
        data: $scope.tagData
    };
            
};