Select2 Tagging (Fixed)

http://angularjs.org/

by maxisam

HTML

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
  <link href="http://ivaynberg.github.com/select2/select2-3.2/select2.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
  <script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
  <script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
  <script src="http://ivaynberg.github.com/select2/select2-3.2/select2.js"></script>

<div style="border: 1px solid red;margin-bottom:10px;">Tagging
    
    <div ng-controller="MyCtrl">
        <input id="tags" type="hidden" ui-select2="tagSelector" ng-model="tagSelection" style="width:300px;" />
        
        <pre>
            tagSelection: {{ tagSelection | json }}
        </pre>
    </div>
</div>

JavaScript

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

function MyCtrl($scope,$filter) {
    $scope.tagData = [{
        "id": "01",
        "name": "Perl",
        "text": "Perl",
        "color": "red" },
    {
        "id": "02",
        "name": "Java",
        "text": "Java",
        "color": "blue" },
    {
        "id": "03",
        "name": "JavaScript",
        "text": "JavaScript",
        "color": "orange" },
    {
        "id": "04",
        "name": "Scala",
        "text": "Scala",
        "color": "green" } ];

    $scope.tagSelection = [ $scope.tagData[0], $scope.tagData[1] ]; 
    
    function tagFormatter(o) {
        
        if( o.id.indexOf('(*)') < 0 ) {
            return '<table style="font-family:Verdana; font-size: 12px"><tr><td style="font-family:wingdings; color: ' + o.color + '; font-size: 24px; padding-top:3px; padding-right:5px">&#171;</td><td>' + o.name + '</td></tr></table>';
        }
        return o.name;
    }
    
    $scope.tagSelector = {        
        //id : function(o) { return o.id }, 
        //formatResult: tagFormatter, 
        //formatSelection: tagFormatter,
        //searchValueFunc: function(o) { return o.name },
        //escapeMarkup: function(o) { return o; },
        data: $scope.tagData,
        multiple: true//,
        //initSelection: function(element, callback) {             
          //  callback($scope.tagSelection);
        //}
    };
}