angularjs - select2 - tagging with objects

http://angularjs.org/

by knalli

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.3.1/select2.min.js"></script>
      
  <script src="http://rawgithub.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>
            <button ng-click="addCoffeeScript()">Add Coffee</button>
    </div>    

</div>

JavaScript

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

function MyCtrl($scope, $timeout) {

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

    $timeout(function(){
        $scope.tagsSelection.push({user:{'id': '02', 'text': 'Java'}});
    }, 5000);       

    $timeout(function(){
        $scope.tagsSelection.pop(0);
    }, 10000);
            
    $scope.tagData = [{
        
        user: {"id": "01","text": "Perl"}
    },
    {
        
        user: {"id": "02","text": "Java"}
    },
    {
        
        user: {"id": "03","text": "JavaScript"}
    },
    {
        
        user: {"id": "04","text": "Scala"}
    }];
        
    $scope.tagAllOptions = {
        multiple: true,
        data: $scope.tagData,
        formatSelection: function (data, container) {
            return data && data.user ? data.user.text : undefined;
        },
        id: function(data) {
            return data && data.user ? data.user.id : undefined
        }
    };
    
    $scope.addCoffeeScript = function(){
        $scope.tagsSelection.push({user:{'id': '09', 'text': 'CoffeeScript'}});
        console.info($scope.tagsSelection);
    };
            
};