angular javascript ng-model not working

Question

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 this works is, the checked-input validates whatever is typed in to ensure that it is a URL, and once it is validated, isBtnClassDisabled becomes false, so that the button in the second div appears, and you are able to click it. This calls the function vm.addUserPublisher, however, when I try to log this.scope.customDomain (the ng-model of the checked-input) from the controller, the console returns undefined. Can anyone explain why? Thanks.

Edit 1 - My controller looks as follows:

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);
        }
        ...
 }

Edit 2 - The <checked-input> directive 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: "="
  };
}

Answer 1

Try using a template for the checked-input directive. Define the ng-model within the directive's template instead of explicitly on the HTML.