AngularJS ng-template with ng-messages-include

Question

I'm trying to create a script type of text/ng-template to put my error messages template into $templateCache. I want this script file to be remote, in it's own file outside of the HTML.

<script type="text/ng-template" id="error-messages">
  <span ng-message="required">This field is required.</span>
  <span ng-message="min">This number must be larger than {{min}}.</span>
  <span ng-message="max">This number must be smaller than {{max}}.</span>
  <span ng-message="number">A number is required.</span>
  <span ng-message="date">A date is required.</span>
</script>

Then in the HTML I want to reference this template that I believe should be in $templateCache and I can access it by Id.

<form name="userForm">       
      <div class="form-group">
        <label for="requiredInput">Required</label>
        <input type="text" class="form-control" id="required" name="requiredInput" 
        ng-model="user.required" required />
        <div ng-messages="userForm.requiredInput.$error" ng-messages-include="error-messages"></div>
      </div>
</form>

If i put the script inline with the HTML it works just fine but I want it to be in a remote file. When I move it to a remote file my HTML is unable to find my template error-messages.

This is my first Plunker I'm sharing. Please let me know if you can't get to it. http://plnkr.co/edit/NgSm7piaECWBab1LOmp3?p=preview

Answer 1

Please check the plunker - http://plnkr.co/edit/luhUuZURCOeHSuEhi11x?p=info

angular.module('app', ['ngMessages'])
.run(function ($templateCache, $http) {
  $http.get('scriptTemplate.html')
  .then(function(response) {
    $templateCache.put('error-messages', response.data); 
  })
})

Load the ng-messages-include template using $http in the run phase of the application and save it in the templateCache.