To facilitate a copy to clipboard pattern, we will utilise NGClip, which in turn uses the ZeroClipboard library.

Add the following to your package.json files

  • zeroclipboard
  • ng-clip
  • $ npm install

Include the correct JavaScript files in the JavaScript sprockets

# Angular Clipboard
window.ZeroClipboard = require "zeroclipboard"
require 'ng-clip'

Set ngClipboard as a dependency

angular.module 'app', [ 'ngClipboard' ]

Add the provider and path to the SWF file into your angular app config

config = ( ngClipProvider ) ->
ngClipProvider.setPath '/assets/swf/ZeroClipboard.swf'

Add the provide to the inject

config.$inject = [

Add clip-copy directive to the desired element, example:

  • clip-copy="NGModel"
  • clip-copy="getTextToCopy()"
  • clip-click="doSomething()"

Zero clipboard example


= codeBlender "clipboard", "atom", { model: "clipboard.copy1" }
<button class='btn btn-default btn-primary' clip-copy='clipboard.copy1' type='button'>


Angular clipboard example

Angular clipboard as a service


NgClipboard example

Utilises clipboardJS to copy

Resources Useful websites and tutorials


Task Date
Move the required ngClipProvider.setPath to the controller if possible
Add clipboardJS example
Create the DOM interaction as an angular directive
Move text into locale
Make this more angular - use ng-class to change tabs for instance and scope to access the contents