JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="application" ng-controller="myController">
    
    <button ng-click="showLogin()">Show login</button>
    <login ng-if="loginShouldBeShowing"></login>
</div>

JavaScript

var myApp = angular.module('application', []);

myApp.controller('myController', ['$scope', function($scope) {
      $scope.loginShouldBeShowing = false;
      $scope.showLogin = function() {
        $scope.loginShouldBeShowing = true;
      };
  
}
]);

myApp.controller('LoginController', ['$scope', function($scope) {
}]);

angular.module('application')
    .directive('login', function($compile) {
        return {
            restrict: 'E',
            controller: 'LoginController',
            template: '<div>Template of login directive</div>',
            link: function(scope, element, attrs) {
                console.log('should i not have a div containing login controlled by loginController at this point?');
            }
        };
});