Angular javascript ng-model not working

Here is a subsection of my project:

<div class="col-md-3 col-sm-4">
    <checked-input
     pholder="{{'publications-customDomain' | translate}}"
     class="add-publisher-input"
     ng-model="customDomain.text"
     icon="glyphicon-globe"
     type="publicationCustomDomain"
     page="publications">
    </checked-input>
</div>
<div class="col-md-3 col-sm-4">
    <button ng-if="isBtnClassDisabled===false" class="add-domain btn btn-primary" ng-click="vm.addUserPublisher(currentTab)">
        <span class="glyphicon glyphicon-plus"></span>{{'publications-addDomain' | translate}}
    </button>
</div>

      

        
        
        
      

    

The way it works is checked-input

checks whatever is typed to make sure it is a url and once it is checked it will isBtnClassDisabled

be false so the button appears in the second div and you can click on it. This calls the function vm.addUserPublisher

, however, when I try to write this.scope.customDomain

( ng-model

of checked-input

) from the controller, the console returns undefined

. Can anyone explain why? Thank.

Edit 1 - My controller looks like this:

class mainPublicationsCtrl {
    private scope: any;
    private timeout: any;
    private modal: any;
    private route: any;
    private http: any;
    private mainScope: any;
    private selSiteServ: any;
    static $inject = ['$scope'];

    constructor($scope, $timeout, $http, $modal, $route, selSiteServ) {
        $scope.vm = this;
        $scope.isBtnClassDisabled = true;
        $scope.selectedItem = 0;
        $scope.countOfTabs = 1;
        $scope.customDomain = {
            text: ""
        }
        this.scope = $scope;
        ...
        addUserPublisher(tab: any) {
            console.log(this.scope.customDomain.text);
        }
        ...
 }

      

        
        
        
      

    

Amend 2 - The Directive <checked-input>

is defined as follows:

Template:

<div>
  <div class="input-info-wrap">
    <div class="input-inform state-normal"></div>
  </div>
  <div class="input-group">
    <span ng-if="icon != '' && !isFaIcon"
          class="input-group-addon glyphicon {{icon}} icon-inline btn-item">
    </span>
    <span ng-if="icon != '' && isFaIcon"
          class="input-group-addon fa {{icon}} fa-input-label-size icon-inline btn-item">
    </span>
    <input type="text" 
           class="form-control btn-item form-tab-input" 
           placeholder="{{pholder}}"
           ng-model="model"
           maxlength="20">
    <span class="input-group-addon glyphicon glyphicon-asterisk input-state"></span>
  </div>
</div>

      

        
        
        
      

    

Javacript:

class checkedInput implements ng.IDirective {
  public link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
  public templateUrl = 'partials/directives/checked-input.html';
  public scope = { 
    model: "=",
    icon: "@",
    pholder: "@",
    type: "@",
    page: "@",
    num: "@",
    gstab: "=",
    gsrow: "=",
    tab: "=",
    isFaIcon: "="
  };
}