title: ngMessages dont work inside a directives template
body: <p>My ngMessages doesnt work inside my directives template!</p>
  
  <p>I have a directive <code>myInput</code> with a template and a link function, inside the template function I create template string for a wrapped <code>&lt;label&gt;</code> and <code>&lt;input&gt;</code>. </p>
  
  <p>Inside the Link function I use the <code>require: '^form'</code> FormController and retrieve the form name. Then I'm putting a <code>ngMessages</code> block after the wrapped elements.</p>
  
  <pre><code>    (function () {
          'use strict';
  
          angular
              .module('app.components')
              .directive('myInput', MyInput);
  
          /*@ngInject*/
          function MyInput($compile, ValidatorService, _, LIST_OF_VALIDATORS) {
              return {
                  require: '^form',
                  restrict: 'E',
                  controller: MyInputController,
                  controllerAs: 'vm',
                  bindToController: true,
                  template: TemplateFunction,
                  scope: {
                      label: '@',
                      id: '@',
                      value: '=',
                      validateCustom: '&amp;'
                  },
                   link: MyInputLink
  
              };
  
              function MyInputController($attrs) {
                  var vm = this;
                  vm.value = '';
                  vm.validateClass = '';
                  vm.successMessage = '';
                  vm.errorMessage = '';
              }
  
              function TemplateFunction(tElement, tAttrs) {
                  return '&lt;div class="input-field"&gt;' +
                      '   &lt;label id="input_{{vm.id}}_label" for="input_{{vm.id}}" &gt;{{vm.label}}&lt;/label&gt;' +
                      '   &lt;input id="input_{{vm.id}}" name="{{vm.id}}" ng-class="vm.validateClass" type="text" ng-model="vm.value" &gt;' +
                      '&lt;/div&gt;';
  
              }
  
              function MyInputLink(scope, element, attrs, form){
                  var extra = '   &lt;div ng-messages="' + form.$name + '.' + scope.vm.id + '.$error"&gt;' +
                      '       &lt;div ng-messages-include="/modules/components/validationMessages.html"&gt;&lt;/div&gt;' +
                      '   &lt;/div&gt;';
                  $(element).after(extra);
              }
          }
      })();
  </code></pre>
  
  <p>Usage:</p>
  
  <pre><code>    &lt;h1&gt;Test&lt;/h1&gt;
      &lt;form name="myForm"&gt;
          &lt;my-input label="My Input" id="input1" value="vm.input1"&gt;&lt;/my-input&gt;
  
          -------
  
          &lt;!-- this block is hardcoded and is working, it does not come from the directive! --&gt;
          &lt;div ng-messages="myForm.input1.$error"&gt;
              &lt;div ng-messages-include="/modules/components/validationMessages.html"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/form&gt;
  </code></pre>