JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="TestrouteCtrl as tr">
    <div class="col-md-12">
        <input type="checkbox" ng-model="tr.user.admin" />
        <form-input model="tr.user.admin"></form-input>
    </div>
</div>

JavaScript

var module = angular.module('ui.directives', []);

module.controller('TestrouteCtrl', function($scope){
    var controller = this;
    controller.user = { admin: true };
});

module.directive('formInput', function() {
    return {
        restrict: 'EA',
        scope: {
            model: '='
        },
        template: '<input ng-if="!checkbox" type="text" ng-model="$parent.model"/><input ng-if="checkbox" type="checkbox" ng-model="$parent.model"/>',
        link: function($scope, element, attrs, controller) {
            $scope.checkbox = true;
        }
      };
    }
  );

angular.module('myApp', ['ui.directives']);