title: Issues accessing linking/scope inside of a directive
body: <p>Could use some help understanding whats happening here... I need to create a directive from within a service and add it to the DOM... check! But now when I try to access properties on the scope, inside of the directive/template I get nothing. Correction, <code>{{property}}</code> inside of the template by itself will work, but not <code>&lt;h1&gt;{{property}}&lt;/h1&gt;</code>.. so in other words, it stops working when I add HTML to the template. Anyways I created this <a href="http://plnkr.co/edit/JdoX9SzNNuFs8cvjvGKF?p=preview" rel="nofollow">plunkr</a> to try to understand.</p>
  
  <p>app:</p>
  
  <pre><code>  angular.module('app', [])
      .run(['fooService', function(fooService) {
        fooService.foo('Hello World!');
      }]);
  </code></pre>
  
  <p>service:</p>
  
  <pre><code>  function fooService($rootScope, $compile, $animate) {
  
      function createDirective(message) {
        var newFoo = {
          scope: $rootScope.$new()
        };
  
        var target = angular.element(document.querySelector('#bar'));
        var elem = angular.element(document.createElement('foo'));
  
        newFoo.scope.message = message;
  
        newFoo.elem = $compile(elem)(newFoo.scope);
        $animate.enter(newFoo.elem, target).then(function() {});
      }
  
  
      function foo(message, overrides) {
        return createDirective(message);
      }
  
      return {
        foo: foo
      };
    }
  
    fooService.$inject = ['$rootScope', '$compile', '$animate'];
  
    angular.module('app')
      .factory('fooService', fooService);
  </code></pre>
  
  <p>directive:</p>
  
  <pre><code>  function fooDirective() {
      return {
        restrict: 'AE',
        templateUrl: 'foo.html',
        link: function(scope) {
          console.log(scope.message);
        }
      }
    }
  
    angular.module('app')
      .directive('foo', fooDirective);
  </code></pre>
  
  <p>template - displays: "Directive message:"</p>
  
  <pre><code>&lt;h1&gt;
    Directive message: {{message}}
  &lt;/h1&gt;
  </code></pre>
  
  <p>working template -displays: "Directive message: Hello World!"</p>
  
  <pre><code>Directive message: {{message}}
  </code></pre>
  
  <p>New to Angular still so please forgive me if this is not how it should be done but can someone please explain whats happening? Thanks in advanced!</p>