title: Dynamically adding Angular directives
body: <p>I'm fairly new to angular JS and am finding it a steep learning curve, I get the feeling im really missing the point here but here goes:</p>
  
  <p>I want to add a directive to my page from a controller. So I thought if I add the directive tag to the page, the directive and associated controller/template etc get added with it. After reading about the $compile method, I thought this would then be used to bind this directive to its newly created tag. This part is commented out below, but with or without this, I need the word login to appear and its controller to control it?</p>
  
  <p>I can find lots of examples of similar around the web when the directive tag is on the page at load time, and can get those to work fine, so this is whats making think it is related to the $compile method - what am I missing?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="application" ng-controller="myController"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var myApp = angular.module('application', []);
  
  myApp.controller('myController', ['$scope', function($scope) {
  
          function showLoginDirective () {
              $scope.login = angular.element(document.createElement('login'));
  
              angular.element(document.body).append($scope.login);
          };
  
          showLoginDirective();
      }
  ]);
  
  angular.module('directives', [])
      .directive('login', function($compile) {
          return {
              restrict: 'E',
              controller: 'LoginController',
              template: '&lt;div&gt;login&lt;/div&gt;',
              link: function(scope, element, attrs) {
                  //$compile(element.contents())(scope.$new);
                  console.log('should I not have a div containing login controlled by loginController at this point?');
              }
          };
  });
  </code></pre>
  
  <p>the above code is also here: <a href="http://jsfiddle.net/d5n6L/7/" rel="noreferrer">http://jsfiddle.net/d5n6L/7/</a></p>