ng-include not working with script type="text/ng-template"

Question

Here is my Plunker:

http://plnkr.co/edit/oIei6gAU1Bxpo8VUIswt

When the button is clicked, the following should be inserted before the "Hello World!" span:

<script type="text/ng-template" id="tempTest">
  <div>
    <span>Properly Inserted</span> 
  </div>
</script>

minus the script tags, of course.

I achieve this by dynamically inserting the following div:

<div ng-include="tempTest"></div> 

And then compiling it. However, if you look at the log, the only thing that is left after the compilation is this:

<!-- ngInclude: tempTest --> 

What is going on here? Why isn't my insert properly compiling? the logic is as follows:

$scope.insert = function(){
    // Create elements //
    var container = angular.element('<div id="compiled-container"></div>');
    var element = angular.element('<div ng-include="tempTest"></div>');

    //Insert parent Container
    $('#greeting').before(container);

    // insert the element
    $animate.enter(element, container);

    // test insertion
    console.log("Before Compile: " +container.html() )

    $compile(element);

    //look again after compile
    console.log("After Compile:  " +container.html() )

};

Answer 1

<div ng-include src="tempTest"></div> 

This should work

^^^ note that this will NOT even begin to work unless single quotes are added (as @JHixson has already pointed out), like so:

<div ng-include src="'tempTest'"></div>

Answer 2

The quick answer might have been:

<div ng-include="'tempTest'"></div>
Probably you just forgot the single quotes to reference the template.

The long answer:

It is not advised to access the DOM inside a controller - you will get in trouble as the code will be flooded with $scope.$apply() calls. Think about implementing this feature with a directive. I tried to create a starting point from your code here

http://plnkr.co/UWUCqWuB9d1dn6Zwy3J3

var app = angular.module('plunker', ['ngAnimate']);

app.directive('greeting', function($compile){
  return {
    restrict: 'E',
    scope: {
      name: '='
    },
    template: '<div>'+
              '  <span>Hello {{name}}!</span>'+
              '  <button ng-click="insert()">test</button>'+
              '</div>',
    link: function(scope, element, attrs) {
       scope.insert = function() {
         var container = angular.element('<div ng-include="\'tempTest.html\'"></div>');
         element.before($compile(container)(scope));
       }
    }
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

<greeting name="name"></greeting>

The template elements are inserted before the Hello World! textnode everytime the button is clicked.

Side note You dont even need the scope{ name: '='} as the directive will inherit its surrounding scope, but its the cleaner way to pass (actually bind) controller variables to a directive explicitly.