angularjs - dynamically choosing models for data binding (using a jQuery plugin via a directive) -

i got spectrum jquery plugin , two-way data binding work, see plnkr. below code of directive, makes me paste in...

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);     }     };   } }; }); 

what have: can choose color using spectrum's color picker , it's in sync input field. can type color input , gets synced color picker.

what want: thing want choose multiple colors using same color picker. ideally user clicks "choose 2nd color" button , sync between color picker , second input field, it's turned off first field (it retains value , can turned on via "choose 1st color").

how achieve that? 1 color works beacuse color picker , first input use same ngmodel.

i searched lot , doesn't change value of ngmodel depending on clicked button (or can i?). maybe use variable in $rootscope, bad practice , far couldn't job done it.

do have use watchers , controller injections or what? don't know next. options seem pretty complicated rather simple. thing can right replace color picker 1 color color picker color that’s rather primitive.