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:<

Answer 1

The quick answer might have been:

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: '
'+
              '  Hello {{name}}!'+
              '  test'+
              '
',
    link: function(scope, element, attrs) {
       scope.insert = function() {
         var container = angular.element('
');
         element.before($compile(container)(scope));
       }
    }
  }
})

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

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.