将jQuery插件输入值推送到AngularJS中的模型

情况：
我正在移植,或者我应该说尝试将Lakshan Perera的简单jQuery ColorPicker(https:// github.com/laktek/really-simple-color-picker)移植到Angular上.在回顾SO上的类似问题后,似乎有些人通过控制器分配了插件的范围,但正确的(Angular)方法是将插件包装在指令中.我越来越近了.我能够通过我的新自定义属性在我的视图中正确呈现插件,但我不确定如何设置指令以将输入值传递给属性的值(ng-model).实际的输入更新,但Angular没有监听更改,因此实际上并不知道输入值已更新.官方文档讨论了如何设置自定义属性(http://docs. angularjs.org/guide/directivE),但我仍然无法弄清楚如何实际观察元素中的更改然后将该值推送到属性的值.

期望的功能 –

<input my-widget="{{Color}}" type="text"/> <!-- my-widget instantiates my directive -->
<h1 style="color:{{Color}}"></h1>          <!-- I would like the input value to dump into the attribute's value,in this case {{Color}} -->

这是我到目前为止：

app.directive('myWidget',function(){
    var myLink = function(scope,element,attr) {

        scope.$watch('element',function(){

            var value = element.val();

            element.change(function(){

             console.log(attr.ngModel); // This is currently logging undefined

                     // Push value to attr here? 

                console.log( value + ' was SELEcted');
            });
        });

        var element = $(element).colorPicker();
    }

    return {
        reStrict:'A',link: myLink
    }   

});

题：
我如何设置属性值来捕获元素的更新值？

app.directive('colorPicker',function() {
  return {
    scope: {
      color: '=colorPicker'
    },link: function(scope,attrs) {
      element.colorPicker({
        // initialize the color to the color on the scope
        pickerDefault: scope.color,// update the scope whenever we pick a new color
        onColorChange: function(id,newvalue) {
          scope.$apply(function() {
            scope.color = newValue;
          });
        }
      });

      // update the color picker whenever the value on the scope changes
      scope.$watch('color',function(value) {
        element.val(value);
        element.change();                
      });
    }
  }
});

<input color-picker="color">