<!doctype html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
<script src="//rawgit.com/asafdav/ng-clip/master/src/ngClip.js"></script>
</head>
<body>
<div ng-app="myapp">
<div class="container" ng-controller="myctrl">
<div class="page-header">
<h3>Simple Script</h3>
</div>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="" ng-model="name">
</div>
<div class="form-group">
<label>Gender</label>
<input type="radio" ng-model="gender" value="Male"> Male <input type="radio" ng-model="gender" value="Female"> Female
</div>
<div class="form-group">
<label>DOB</label>
<input type="text" class="form-control" placeholder="" ng-model="dob">
</div>
<p><strong>Preview</strong></p>
<p ng-model="final">Name: {{name}}<br/>
Gender: {{gender}}<br/>
DOB: {{dob}}</p>
<button class="btn btn-default" clip-copy="final">Copy!</button>
<br><br>
<textarea class="form-control" rows="3" placeholder="Test here"></textarea>
</form>
</div>
</div>
<script>
var myapp = angular.module('myapp', ["ngClipboard"]);
myapp.config(['ngClipProvider',
function(ngClipProvider) {
ngClipProvider.setPath("//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.swf");
}
]);
myapp.controller('myctrl', function($scope) {
$scope.fallback = function(copy) {
window.prompt('Press cmd+c to copy the text below.', copy);
};
$scope.showMessage = function() {
console.log("clip-click works!");
};
});
</script>
</body>
</html>