angularjs select2 selected value is not shown in the field

I am using angularjs with select2 plugin.

When I edit an item that has a property where I can set it from a drop down, the current selected value is selected/highlighted in the drop-down but is not visible. I have to actually click the drop-down to see the actual option selected. Basically at first the field is empty ...

Like this:

As you can see the field is empty but if you click it then you see that Arizona is selected. How can I show Arizona right in the drop down without having to click it?

And this is how I bind it to the element.

  <select data-custom-select class="form-control" data-ng-model="newType.Type" data-ng-options="t for t in definitions.Types"></select>

data-custom-select is a directive that allows me to apply select2() on the element:

 directive('customSelect', [function () {
    var link = function (scope, element, attrs) {
        element.select2();
    };

    return {
        restrict: 'A',
        link: link
    };
}])

The model:

$scope.newType = {
    Type: 'Type 1'
}

$scope.definitions ={
    "Definitions": [{
        "Id": "1",
        "Name": "Name 1"        
    }, {
       "Id": "2",
        "Name": "Name 2" 
    }],
    "Types": ["Type 1", "Type 2", "Type 3"]
};

Try not to mix up jQuery plugins and angularjs. There's an angularjs module for Select2 here: angular-ui/ui-select

Example: http://jsbin.com/nojewamivu/1/edit?html,js,output