Angular: Passing Object to Directive that has ngDialog

having issues doing this

by Egli

HTML

<script src="https://code.angularjs.org/1.2.13/angular.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.2.13/css/ngDialog-theme-default.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.2.13/css/ngDialog.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.2.13/js/ngDialog.js"></script>
<div ng-controller="MyCtrl">
    <b>Base scope value for variable1 is:</b> {{variable1}}<br />
    <span pass-object passed-object="variable1"></span>
</div>

CSS

.directive{
    background-color:lightBlue; 
    display:inline-block; 
    border-radius:5px; 
    padding:5px; 
    margin: 20px 10px;
}

JavaScript

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

myApp.controller('MyCtrl', function ($scope) {
    $scope.variable1 = "Egli";
});

myApp.directive('passObject', ['ngDialog', function(ngDialog) {
    return {
        restrict: 'A',
        scope: { passedObject: '=' },
        template: "<div class='directive'>This is the value of the passed object, {{passedObject}}!</div>",
        link: function($scope, element){
            element.on('click',function(){
                ngDialog.open({
                    template: '<div><input type="text" ng-model="passedObject"/></div>',
                    plain: true,
                    scope:$scope
                })
            });
        }
    };
}]);