Internet Explorer modal directive in angular js - angularjs

Question

Hello I had written following directive in angular js to use modal:
appname.directive("modal", function () {
return {
template: '<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude=""></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'EA',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});
Its work fine in Chrome, IE 9 and firefox now I want it to work it in IE 8 , some blog says used document.createElement('directivenmae'), but its just create simple html element not include content of this template.
It would be nice if anyone provide suggestion for my this issue.

Answer 1

Ok, so first of all you will have to read the entire section on IE8 integration on Angular's website. There is a number of things that you have to do in order to make it work. Start there.
"They" are right that you have to call this piece of code:
document.createElement(yourTagName)
It's not intended to render anything, it is aimed to let IE8 know that you will be having some custom HTML tags in your markup.
Finally, please note that IE8 is not supported in AngularJS 1.3.+, so be advised and use latest 1.2.x branch.
After all that you will be good to go - I'm also using Bootstrap + Angular in IE8 and it works fine :)