title: AngularJS $interpolate error text.indexOf while compiling template
body: <p>I'm trying to compile a template in a service in AngularJS, but I keep receiving this error when I use the $compile service:</p>
  
  <pre><code>text.indexOf is not a function
  </code></pre>
  
  <p>I've tried a few different approaches, but I can't seem to get a working solution. There is a working fiddle though: <a href="http://jsfiddle.net/DUM7t/" rel="nofollow">http://jsfiddle.net/DUM7t/</a> So I have no clue why it's breaking. Thanks in advance!</p>
  
  <p>EDIT:
  If I place the snipping contents in a run block in my application it works aswell.</p>
  
  <p>Service:</p>
  
  <pre><code>(function () {
    'use strict';
  
    angular
      .module('app')
      .service('PrintUtilService', PrintUtilService);
  
    PrintUtilService.$inject = ['$rootScope', '$timeout', '$interpolate', '$templateRequest', '$uibModal', 'APP', 'FORMATS'];
    /* @ngInject */
    function PrintUtilService($rootScope, $timeout, $compile, $templateRequest, $uibModal, APP, FORMATS) {
      var service = {
        printTemplate: printTemplate
      };
  
      return service;
  
      function printTemplate(){
        var data = ["1","2"];
        var html  =
          '&lt;div&gt;' +
          '&lt;ul&gt;' +
          '&lt;li ng-repeat="score in data"&gt;{{score}}&lt;/li&gt;' +
          '&lt;/ul&gt;'+
          '&lt;/div&gt;';
  
        var el = angular.element(html);
  
        $rootScope.data = data;
        var result = $compile(el)($rootScope); // error on this line
  
        $timeout(function() {
          console.log(el.html());
          alert(el.html());
        });
      }
    }
  })();
  </code></pre>