AngularJS：动态编译指令模板时适当的范围绑定

>指令D1应用于元素E.
>指令D1传递包含指令D2的模板
>指令D2订阅了ngModel更新
>指令D1使用指令D2编译模板
>指令D1和D2被认为是彼此独立的
>指令D1和D2具有隔离范围
>(指令D1可能与DOM分离,但保留在内存中)

目的

> make指令D2对应用了D1的元素E的范围变化作出反应

的index.html

<div ng-app="myApp" ng-controller="MainCtrl">
<label>
    <u>model: </u>
    <input type="text" ng-model="someValue" outer="tmpl.html"/>
    <hr/>
</label>

<script type="text/ng-template" id="tmpl.html">
    <inner test="123"></inner>
</script>

<script src="angular.js"></script>

app.js

(function (ng) {

var app = ng.module('myApp',[]);

app.controller('MainCtrl',[
    '$scope',function ($scope) {
        $scope.someValue = 'Hello,World!';
    }
])
// directive D2
.directive('inner',function () {
    return {
        restrict: 'AE',replace: true,template: '<p>{{model || "N/A"}}</p>',scope: { model: '=ngModel' },link: function (scope,element,attrs) {
            scope.$watch('model',function (newValue,oldValue) {
                if (!ng.isDefined(oldValue) && !ng.isDefined(newValue)) {
                  return;
                }
                // do stuff...
            });
        }
    };
})
// directive D1
.directive('outer',[
    '$templateCache','$compile',function ($templateCache,$compile) {
        return {
            restrict: 'AE',scope: {},attrs) {
                var template = $templateCache.get(attrs.outer);
                var compiled = $compile(template)(scope);
                element.parent().append(compiled);
            }
      };
    }
]);

})(angular);

小提琴

这里有一个过于简化的版本：http://jsfiddle.net/Nscp8/12/

例

D1是一个弹出窗口小部件,可以配置为插入HTML作为其内容.
D2是一个QR码小部件,可以观察模型并更新更新.

问题

ngModel绑定未正确完成,我没有从中获取更新.我在这做错了什么？