动态选择数据绑定模型（通过指令使用jQuery插件）

Question

我将Spectrum jQuery插件和双向数据绑定工作，请参阅Plnkr。下面是我的指令的代码，因为SO让我粘贴了一些......

app.directive('picker', function () {
return {
restrict: 'E',
require: 'ngModel',
link: function (scope, el, atts, ngModel) {
  el.spectrum({
    color: '#ffffff',
    flat: true,
    move: function (newColor) {
      scope.$apply(function () {
        ngModel.$setViewValue(newColor.toHexString());
      });
    },
    showButtons: false
  });
  ngModel.$render = function () {
    if (document.getElementById('firstColor').value !== "") {
      el.spectrum("set", ngModel.$viewValue);
    }
    };
  }
};
});

我有什么： 我可以使用Spectrum的颜色选择器选择一种颜色，它与输入字段同步。我也可以在输入中键入颜色，然后与颜色选择器同步。

我想要的是什么： 问题是我想使用相同的颜色选择器选择多种颜色。理想情况下，用户单击“选择第二颜色”按钮，然后同步在颜色选择器和第二个输入字段之间，它关闭第一个字段（它保留其值并可以通过“选择第一颜色”重新打开）

我如何实现这一目标？对于一种颜色，它的工作原理是颜色选择器，第一个输入使用相同的ngModel。

我搜索了很多，看起来我可能无法根据点击的按钮更改ngModel的值（或者我可以吗？）。 也许我可以在$ rootScope中使用一个变量，但这是一个不好的做法，实际上到目前为止我无法完成它的工作。

我是否必须使用一些观察者和控制器注射或什么？老实说，我不知道接下来该做什么。所有这些选项看起来都非常简单。我现在唯一能做的就是用另一种颜色的颜色选择器替换一种颜色的颜色选择器，但这是相当原始的。