Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Angular directive for double variable binding of Polymer attributes.

N.B. This will not work with raw paper/core elements because they do not publish their attributes. See note below on Polymer Usage for details.


Use bower to install:

$ bower install angular-bind-polymer


Script order is important. The web components platform (polyfills) need to be loaded first, followed by the Angular library and then this library (angular-bind-polymer):

<script src="bower_components/platform/platform.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="angular_bind_polymer.js"></script>

The Angular module needs to be inititialized before the Polymer elements are imported otherwise Polymer will overwrite the attributes before angular-bind-polymer has a chance to process them.

Add eee-c.angularBindPolymer as dependency for your Angular application:

var PizzaStoreApp = angular.module('pizzaStoreApp', [

The final piece of setup is to import the Polymer elements:

<link rel="import" href="test/x-double.html">

To bind values from Polymer elements, apply the bind-polymer directive:

<x-pizza bind-polymer state="{{pizzaState}}"></x-pizza>
<pre ng-bind="pizzaState"></pre>

Changes from the <x-pizza> custom element will now update the pizzaState variable in local scope.

Note: changes in Angular's scope are already bound. That is, changes to pizzaState will update the <x-pizza> custom element without this or any other modules. This directive is soley used to watch for changes in custom elements for the purposes of updating a bound variable in Angular's scope.

Support in Polymer

This will only work if the Polymer element publishes and reflects attributes. That is, it is insufficient to declare attributes:

<!-- THIS WON'T WORK!!! -->
<polymer-element name="x-double" attributes="in out">
  <template><!-- ... --></template>
    // ...

To mark the out attribute as reflectable, declare it as such with the publish property:

<polymer-element name="x-double" attributes="in out">
  <template><!-- ... --></template>
    Polymer("x-double", {
      publish: {
        out: {value: 0, reflect: true}
      // ...

Unfortunately, core and paper elements tend not to reflect attributes at this time. This means that this directive will not work with them. Hopefully this will change in the near future.


Much thanks to everyone that has helped with suggestions. In particular, thanks to the following for code improvements:


Angular directive for *double* variable binding of Polymer attributes.







No packages published

Contributors 4