Select2 plugin in angularjs puts the list out of controller

Select2 plugin in angularjs puts the list out of controller

I am using the select2 angularjs directive, which uses the select2 jquery
plugin. I am facing a problem with the list of the select2 is not shown
properly.
Below is my view :
<div ng-controller="MyCtrl" class="new-proj">
<select
ui-select2="{dropdownCssClass:dropdown-menu}"
multiple
ng-model="data.selectedCountries"
data-placeholder="Choose or Search for countries"
name="countries"
style="width:200px;">
<option ng-repeat="country in data.countriesList"
value="{{country.code}}">{{country.name}}</option>
</select>
</div>
When the data is fetched from the controller and i start typing the name
of a country in the select2 textbox the list is messed up. I mean the css
is not retrieved properly.
css looks like this :
.new-proj .select2-results {
}
But the select2-results is hidden and its created outside of the
controller at runtime and outside of the .new-proj class, is there anyway
i can fix it, by restricting the runtime select2 created outside of
controller div.
<div ng-controller="MyCtrl" class="new-proj">
.... Controller content here ...
</div>
<div class="select2-drop select2-drop-multi select2-display-none
select2-drop-active"
style="top: 38.986111640930176px; left: 7.986111640930176px; width:
200px; display: none;">
<ul class="select2-results">
<li class="select2-no-results">No matches found</li></ul>
</div>