How to load dynamic directive content using AngularJS? [duplicate]

I'm having a hard time trying to implement a dynamic loaded content using Angular... I have several widgets and their partialName variable is loaded via binding, after a request. That's why I'm using scope.$watch below. Even though the template is set with its correct content, the view itself doesn't refresh to display the appropriate content. I've tried somethings like the $broadcast below with no luck. How can I achieve this? Thanks!

export class CioTemplateLoader implements ng.IDirective {
  public template: string;
  public partials: { [id: string]: string; } = {};
  public scope = {
    partialName: '='
  };
  public route: any;

  static $inject = [
    '$route'
  ];

  constructor(){//$route: any) {
    // this.route = $route;
    this.partials['claimOverview'] = require('../../claims/claim-overview.html');
    //...
  }

  link = (scope: ng.IScope, elem: JQuery, attributes: ng.IAttributes) => {
    var that = this;
    scope.$watch('partialName', function (value: string) {
      if (value) {
        that.template = that.partials[value];
        debugger;
        scope.$broadcast("REFRESH");
      }
    });
  }

  public static Factory(): angular.IDirectiveFactory {
    var directive = () => {
      return new CioTemplateLoader();
    };

    return directive;
  }
}