title: AngularJS Typescript Directive
body: <p>Having problems creating nested directive using Typescript. I can do it in simple AngularJs: 
  <a href="http://plnkr.co/edit/UruTqEdMnqNT5wjxcQNC?p=preview">http://plnkr.co/edit/UruTqEdMnqNT5wjxcQNC?p=preview</a> ,</p>
  
  <p>but using TypeScript it gives me <strong>"No controller"</strong> error message.</p>
  
  <pre><code>/// &lt;reference path="../../Scripts/AngularJs/Typings/angular.d.ts" /&gt;
  
  export class directiveA {
      public static $inject: Array&lt;string&gt; = [];
      constructor() {
          var directive: ng.IDirective = {};
          directive.priority = 0; 
          directive.restrict = "A";
          directive.scope = {};
          directive.transclude = true;
          directive.templateUrl = "otherTemplate.html";
          directive.replace = true;
          directive.controller = function ($scope, $element) {
              this.flip = function () {
                  $element.toggleClass("flipped");
               }
          }
          directive.replace = true;
  
          return directive;
      }
  } 
  
  
  export class directiveB{
      public static $inject: Array&lt;string&gt; = [];
      constructor() {
          var directive: ng.IDirective = {};
          directive.require = "^directiveA";
          directive.priority = 1;
          directive.restrict = "A";
          directive.scope = {
              simplrSide : "@"
          };
          directive.transclude = true;
          directive.templateUrl = "templeUrl.html";
          directive.link = function (scope, iElement, iAttrs, simplrEditable) {
              scope.flip = function () {
                  simplrEditable.flip();
              }
          }
          directive.replace = true;
          return directive;
      }
  }
  </code></pre>
  
  <p>I dont know if its relevant, but i am using AMD Require.JS  for script load</p>