an integration between Polymer and Angular with ng-polymer-elements

* npm install -g yo
* npm install generator-polymer -g
* mkdir ng-polymer-test && cd $_
* yo polymer
* npm install grunt
* npm install grunt-contrib-watch
* npm install grunt-replace
* bower install angular
* bower install ng-polymer-elements
* yo polymer:element m-test
* subl app/index.html

<!doctype html>
<html lang="" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>poly foo</title>
<link rel="stylesheet" href="styles/main.css">
http://bower_components/webcomponentsjs/webcomponents.js
http://bower_components/angular/angular.js
http://bower_components/ng-polymer-elements/ng-polymer-elements.js
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="elements/elements.html">
<link rel="import" href="elements/m-test/m-test.html">
</head>

<body unresolved fullbleed layout vertical>

</body>

var app = angular.module('myApp', ['ng-polymer-elements']);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.addresses = [{
"number":"3",
"street":"main",
}];

$scope.myClick = function(event) { alert('Hello'); };

});

angular.module('ng-polymer-elements').constant('$ngPolymerMappings', {
mTest: {
ngModel: {
primitive: 'firstname'
},
ngClick: {
event: 'someEvent'
}

}
});

</html>

* subl app/elements/m-test/m-test.html

<link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="m-test" attributes="">
<template>
<style>
:host {
display: block;
}
</style>
Hello from m-test {{firstname}}
<br>

<br>
<input type="checkbox" name="c2" value="c2" id="c2" onchange="myonchange()" >
</template>

(function () {
Polymer({
myonchange:function(){
this.asyncFire("someEvent",{});
},
});
})();

</polymer-element>

* grunt server --force

source https://github.com/irmann/ng-polymer-elements-example