AngularJS Directive Transclude Form

Answer to https://stackoverflow.com/questions/54800197/could-not-get-input-data-from-modal-pop-up-using-angular-js

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container" ng-app="cab" ng-controller="ownerviewController">
  <div class="row">
    <div class="col">
      <h4>current</h4> Status: <pre>{{status}}</pre> Comment: <pre>{{comment}}</pre>
    </div>
    <div class="col">
      <h4>edited</h4> Status: <pre>{{edit.status}}</pre> Comment: <pre>{{edit.comment}}</pre>
    </div>
  </div>
  <div class="row">
    <div class="col">
        <button class="btn btn-primary" type="button"  data-toggle="modal" data-target="#dialog">
        Toggle Modal
        </button>
        <modal title="Owner Information">
    <!-- transcluded contents START -->
    <form class="ng-pristine ng-valid" id="frmsignup" name="frmsignup" autocomplete="off">
      <div class="input-group bmargindiv1 col-lg-4 col-md-4 col-sm-4 col-xs-12 plr-15">
        <span class="input-group-addon ndrftextwidth text-left">Status:</span>
        <select class="form-control" name="status" id="status" ng-model="status" required="required">
          <option value="">Select Status</option>
          <option value="1">Active</option>
          <option value="0">Inactive</option>
        </select>
      </div>
      <div class="input-group bmargindiv1 col-lg-4 col-md-4 col-sm-4 col-xs-12 plr-15">
        <span class="input-group-addon ndrftextwidth text-left">Comment:</span>
        <textarea rows="5" cols="50" class="form-control" id="comment" name="comment" ng-model="comment" required="required">
            </textarea>
      </div>
      <input...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

var dept = angular.module('cab', []);

dept.controller('ownerviewController', function($scope) {
  
  $scope.showModal = false;
  $scope.status = "Active";
  $scope.comment = null;
  $scope.edit = {};
  
  $scope.updateOwnerData = function(ownerData) {
    console.log('updateOwnerData: ', ownerData);
    $scope.edit = ownerData;
  }
});

dept.directive('modal', function() {
  return {
    template: '<div class="modal fade" id="dialog" role="dialog">' +
      '<div class="modal-dialog modal-lg">' +
      '<div class="modal-content">' +
      '<div class="modal-header">' +
      '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
      '<h4 class="modal-title">{{ title }}</h4>' +
      '</div>' +
      '<div class="modal-body" ng-transclude></div>' +
      '</div>' +
      '</div>' +
      '</div>',
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
      title: '@',
      updateFn: '&'
    },
    link: function postLink(scope, element, attrs) {

      $(element).on('shown.bs.modal', function() {
      	console.log("shown.bs.modal");
        scope.$apply(function() {
          scope.$parent[attrs.visible] = true;
        });
      });

      $(element).on('hidden.bs.modal', function() {
        console.log("hidden.bs.modal");
        scope.$apply(function() {
          scope.$parent[attrs.visible] = false;
        });
      });
    }
  };
});