javascript - How do I force jQuery to "listen" for, and activate plugins on, future AngularJS ng-repeat elements? -

decently experienced jquery, new angularjs.

i have page list of colors (variable number) attached jquery colorpickers (marked class ".colorpicker"). on static, php-generated version of page, works great; converting on ng-repeat, jquery doesn't catch future occurances.

is there event can caught $.on(), or there other sneaky best-practices way accomplish angularjs? i've searched around, every answer i've found has been how set $.on('click') or similar.

<ul class="unstyled">   <li ng-repeat="color in showcolors">     <input type="color" class="input-mini colorpicker" ng-model="color.hex"> {{color.category}}   </li> </ul> 

anytime want manipulate dom or use jquery feature/plugin; it's time directive. add directive ng-repeat binds jquery colorpicker input field it's being added dom. like:

<ul class="unstyled">   <li ng-repeat="color in showcolors">     <input data-jq-colorpicker type="color" class="input-mini colorpicker" ng-model="color.hex"> {{color.category}}   </li> </ul> 

and add directive:

yourapp.directive('jqcolorpicker', function(){     var linkfn = function(scope,element,attrs){         // element here = $(this)         // bind plugin or events (click, hover etc.) here         element.colorpicker();         element.bind('click', function(e){           //         });     }      return {         restrict:'a',         link: linkfn     } }); 

note, untested should solve problem. if set plunker or jsfiddle, i'll take look.

also, sure check out jquery passthrough feature of angular ui.