Angular使用附加和编译属性的双向绑定

Question

我正在使用来自另一个指令的指令附加html元素。我设法使用this答案成功地使用指令附加html元素。

但是，通过指令添加到这些元素的值不会随着范围的变化而变化。例如，

控制器代码：

var DatepickerDemoCtrl = function ($scope) {
  $scope.el=2;
};

指令链接功能

link: function link(scope,element, attrs) {
    element.attr('value', scope.el); //sets value to 2 as expected

    element.removeAttr("common-things");

    scope.el = 1 //Does not change value to 1

    $compile(element)(scope);

    //Even changing the scope variable after a timeout, the value remains 2
    $timeout(function(){
      scope.el = 4
    }, 2000); 
  }

可以在这里找到一个工作的plunker：http://plnkr.co/edit/S1t2PlwTX2aUiYZR04pF?p=preview

更改值后运行$ compile，但它会重置元素中的所有值（ex-Changing an attribute并运行compile会删除当前的ng值）。

如何从指令内部将值绑定到作用域？