Angular: Passing Object to Directive that has ngDialog

having issues doing this (Forked after submiting to stackoverflow)

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>
<b>Instructions: </b>Click on the blue items to open ngDialog<br /><br />
<div ng-controller="MyCtrl">
    <b>Base $scope.variable1 = </b> {{variable1.value}}
    <span pass-object passed-object="variable1"></span><br />
    <b>Base $scope.variable2 = </b> {{variable2.value}}
    <span pass-object passed-object="variable2"></span><br />
    <b>Base $scope.variable3 = </b> {{variable3.value}}
    <span pass-object passed-object="variable3"></span><br />
</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) {
    //Lets say i have 3 scope variables
    $scope.variable1 = { value:"value 1" };
    $scope.variable2 = { value:"value 2" };
    $scope.variable3 = { value:"value 3" };
});

//Now i want to create a directive that opens up a ngdialog, I need to be able to pass in a scope variable into this directive
//and from inside the ngDialog i need to be able to update the variable passed in, and have it reflect from the root scope.
myApp.directive('passObject', ['ngDialog', function(ngDialog) {
    return {
        restrict: 'A',
        scope: { passedObject: '=' },
        template: "<div class='directive'>This is the value passed into this directive = {{ passedObject.value }}</div>",
        link: function($scope, element){
            element.on('click',function(){
                ngDialog.open({
                    template: '<div>By updating i need it to reflect in the root scope:<br /><br />' + 
                              '<input type="text" ng-model="passedObject.value"/></div>',
                    plain: true,
                    scope: $scope,
                    controller: ['$scope', function($scope){
                        $scope.$watch('passedObject', function(passedObject){
                            //What do i need to do? it seems like the scope at this level is updating how come the parent is not?
                            if(window.console){console.log('updated with: ' + passedObject.value)};
                            //$scope.$apply();
                        });
                    }]
                })
            });
        }
    };
}]);