Q:

Object doesn't support this property or method

I am trying to develop a generic validation directive. My primary aim is to apply the directive on the input element's parent and using that directive, I want to add validation state like has-error and has-success classes provided by Bootstrap. 
I am able to do this in chrome. However, my problems start with IE8. Yes, I am in hard luck. I have to support IE8.
Anyway, my code is able to transclude input element in appropriate location in template. However, I don't have a clue why this error is popping up in IE8 and at which line also. Error is 
TypeError: Object doesn't support this property or method<div ng-transclude>
Here is my code, since it is just a demo which I am preparing right now, I have used inline styles and scripts.
<!DOCTYPE html>
<html ng-app="myApp" id="ng-app">
<head>
    <title>All in One Validation Directive</title>

    <script type="text/javascript" src="scripts/angular.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/bootstrap.css"/>

    <script type="text/ng-template" id="validationContent">
        <div ng-transclude></div>
        <p class="bg-danger">{{errorMessage}}</p>
    </script>

    <script type="text/javascript">
        var app=angular.module('myApp', []);

        app.controller('DefaultController', function($scope){
            $scope.user={};
        });

        app.directive('validationDirective', function(){
            return {
                restrict: 'A',
                /*template: function(){
                    return angular.element(document.querySelector('#validationContent')).html();
                },*/
                template: '<div ng-transclude></div>',
                transclude: true,
                link: function(scope, element, attrs){

                }
            };
        });
    </script>
</head>

<body ng-controller="DefaultController">
    <div class="container">
        <div class="panel panel-default">

            <div class="panel-heading">
                <h4>All in One Validation Directive</h4>
            </div>

            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-xs-3">Enter Your Name</label>

                        <div class="col-xs-3" data-validation-directive>
                            <input type="text" class="form-control" ng-model="user.name">
                        </div>
                    </div>
                </div>
            </div>
            User Name is here :{{user.name}}
        </div>
    </div>
</body>
</html>

And if you believe that I am using wrong approach for this problem. Please suggest the right one.
EDIT
After some hit and trial, I am able to conclude that this is happening due to presence of input element in the divison to be transcluded. If I remove input element from that division, everything works fine but that is not the goal of the directive. Anyone ? Any Idea ? How I can sort it out ? Or may be I am in wrong direction ? Any clues ?

A:

After a lot of break-points and Sarah's invaluable help, it turned out it has to do with two things:

IE8's detecting (and not ignoring) the white-space after your input's closing tag as an extra node (trying to append it to div[ng-transclude].
JQLite's not proper handling of text-nodes (I am not exactly sure what is not handled properly, but I wasn't in the mood of investigating further :/).

Possible fixes:

Include jQuery: This solves the problem (and maybe other potential issues), but it is frustrating to have to include a whole lib, just to solve a corner-case issue with one version of one browser.
Make sure there are no white-space characters (spaces, tabs, new-lines) after your controls' closing tag. I am not sure which tags are affected (<input>, <select> and <fieldset> seem to be, but there may be others).
You can either strip any white-space: <input ... /></div>
or (if you want to retain the code structure, e.g. for readability's sake) you can "wrap" the white-space in a comment-block:
   <div>
       <input ... /><!--
--></div>

See, also, this short demo.

