AngularJS apply select2 on element within modal - angularjs

Question

I'm trying to apply select2 on a select element within a modal.
The modal is defined as a script ng-template. This works fine if it's not a modal (or a template).
<script type="text/javascript">
$(document).ready(function ($) {
$("#typeDescription").select2({
placeholder: 'Select a type...',
allowClear: true
});
});
</script>
However I cannot include the above code within
<script type="text/ng-template" id="myModal">
</script>
So the thing is I want to apply select2 on my element on the modal. How can I do that? How can I access the modal element by id and apply select2 on it?
EDIT:
I made some changes:
On the controller I made a function:
......
$scope.select = function() {
$(document).ready(function ($) {
$("#typeDescription").select2({
placeholder: 'Select a type...',
allowClear: true
});
});
};
and then within my template:
at the select filed (see bellow) I did like this: data-ng-init="select()"
and actually works, it applies the select2 to my element.
Is this a proper approach? Can I make use of ng-init for this case?
<script type="text/ng-template" id="myModal">
<div class="modal-header">
<button type="button" class="close" ng-click="currentModal.close();" aria-hidden="true">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="field-1">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" data-ng-model="newType.Name" id="field-1" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="field-5">Description</label>
<div class="col-sm-10">
<textarea class="form-control" data-ng-model="newType.Description" cols="5" id="field-5" placeholder="Description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="field-5">Select Type</label>
<div class="col-sm-10">
<select class="form-control" id="typeDescription" data-ng-model="newType.Type" data-ng-init="select()">
<option data-ng-repeat="item in allTypes.Types" value="{{item.Value}}">{{item.Text}}</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-gray btn-single" data-ng-click="currentModal.close();">Cancel</button>
<button type="button" class="btn btn-info btn-single" data-ng-click="createType(); currentModal.dismiss();">Save</button>
</div>
</script>

Answer 1

I would recommend that you create a directive wrapping the select2 plugin:
var lib = angular.module('lib');
lib.directive('mySelect', [function() {
var link = function (scope, element, attrs) {
element.select2({
placeholder: attrs.placeholder,
allowClear: attrs.allowClear
});
}
return {
restrict: 'A',
link: link
};
}]);
use it like this:
<select data-my-select placeholder="'Select a type...'" allowClear="true"></select>
This will initialize the select2 when the select control is rendered.