ng-model和directive之间的双向数据绑定

Question

案例：

我试图通过指令观察选择列表的更改然后根据所选值添加html但由于某种原因我无法观察链接功能的更改。任何的想法 ？感谢

HTML

<select ng-model="selected" ng-options="item as item.type for item in itemsList"></select>

<d-input type="selected.type"></d-input>

JS

app.directive('dInput', function($compile) {
    return {
        restrict: 'E',
        scope : {
            type : '=',
        } ,
        template : '<div></div>',
         link : function (scope, element, attrs) {
            scope.$watch(scope.type, function() {
            var tmplt = '' ;
            if (scope.type == 'input')
                tmplt = '<input type ="text" name="inputname" value="0">';
            if (scope.type== 'select')
                tmplt = '<select ><option> option1</option><option>option2</option></select>';
            if (scope.type == 'radio')
                tmplt = '<input type ="radio" name="inputname" value="0">';

           element.html(tmplt);
           $compile(element.contents())(scope);

            });                                   
        },  
    } 
});