AngularJS: Access formController

AngularJS: Access formController of a form placed inside transcluded directive from parent controller

by manikantag

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.0.9/css/foundation.min.css">
<div ng-controller="appCtrl">
    <div class="panel">
        Id: {{ model.id }}<br>
        Name: {{ model.name }}<br>
        Controller formController: {{ form.name.$viewValue }}<br>
        Directive formController: {{ formCtrl.name.$viewValue }}<br>
    </div>
    <form name="form" class="panel">
        <input type="text" name="name" ng-model="model.name">
    </form>
        
    <button ng-click="modal.show=!modal.show">toggle dialog</button>

        <div modal show="modal.show" form-ctrl="formCtrl">

        <form name="myForm">
            <input type="text" name="name" ng-model="model.name">
        </form>
    </div>
</div>

CSS

.reveal-modal {
    display: block;
    visibility: visible;
}

JavaScript

var app = angular.module('app', []);
app.controller('appCtrl', function ($scope) {
    $scope.model = {
        id: 1,
        name: 'John'
    };
    $scope.modal = {
        show: false
    };
    $scope.formCtrl = undefined;
});
app.directive('modal', function () {
    return {
        scope: { show: '=', formCtrl: '=' },
        transclude: true,
        replace: true,
        template: '<div class="reveal-modal small" ng-show="show"><div class="panel" ng-transclude></div></div>',
        link: function(scope, element) {
        	  var form = element.find('form');
        	  scope.formCtrl = form.controller('form');
        }
    };
});