controller on a typescript angular directive

Binding seems to be not working when a controller written in typescript and called by the directive. this is the directive

import controller = require('framework/frameworkController');

export class FrameworkDirective implements ng.IDirective {
 static instance(): ng.IDirective {
     return new FrameworkDirective;
 }
 controller = 'frameworkController';
 scope: any = {
    title: '@',
 };
  templateUrl = "controlslibrary/framework/frameworkTemplate.html"
}

this is the controller

 export class FrameworkController implements IFrameworkController {
      public isMenuButtonVisible: boolean = true;
      constructor(public $rootScope: ng.IRootScopeService, public $window: ng.IWindowService){
              var fc = this;
            $($window).on('resize.framework', () => {
                   $rootScope.$apply(() => {
                   fc.checkWidth();
                    });
            });
      }

      public checkWidth() {
           var width = Math.max($(this.$window).width(), this.$window.innerWidth);
           this.isMenuButtonVisible = !(width < 768);
      }
 }

this is the template url

 <div ng-if="isMenuButtonVisible">
      <button type="button" class="btn nav-button">
              <i class="fa fa-bars"></i>
      </button>
 </div>

finally this is my module

  import controller = require('framework/frameworkController');
  import directive = require('framework/frameworkDirective');

  angular.module("framework", ['ui.router'])
   .controller("frameworkController", controller.FrameworkController)
   .directive("framework", directive.FrameworkDirective.instance);

when the window is resized it has to check and bring up the button. I can step through the code and it throws no error but the binding is broken. what am i doing wrong?