I want to make two way data binding between Polymer and Angular, for this I am using Angu-poly library.

Here is a link to an example which is working, while passing strings via name and age attributes: working.

<x-kid bind-polymer ng-repeat="kid in kids" angupoly="{name:'kid.name', age:'kid.age'}">
</x-kid>

But when I try to make it with passing an object via kid attribute, it seems that something goes wrong, here is the link: not working.

<x-kid bind-polymer angupoly="{kid:'kid'}">
</x-kid>

What should I do to make it work?

Update:
Also tried it with this library and it didn't work. the code will look like this:

<x-kid bind-polymer kid={{kid}}>
</x-kid>

Big Update:
Here I made some progress tweaking the "angular-bind-polymer" library. For now I am able to bind objects from outside polymer into polymer, here is the updated plunker. The problem now is to do this in the other direction.
Note: I am getting some exception from angular side, take a look maybe you can help to solve it. I think we are very close :).

I want to make two way data binding between Polymer and Angular, for this I am using Angu-poly library.

Here is a link to an example which is working, while passing strings via name and age attributes: working.

<x-kid bind-polymer ng-repeat="kid in kids" angupoly="{name:'kid.name', age:'kid.age'}">
</x-kid>

But when I try to make it with passing an object via kid attribute, it seems that something goes wrong, here is the link: not working.

<x-kid bind-polymer angupoly="{kid:'kid'}">
</x-kid>

What should I do to make it work?

Update:
Also tried it with this library and it didn't work. the code will look like this:

<x-kid bind-polymer kid={{kid}}>
</x-kid>

Big Update:
Here I made some progress tweaking the "angular-bind-polymer" library. For now I am able to bind objects from outside polymer into polymer, here is the updated plunker. The problem now is to do this in the other direction.
Note: I am getting some exception from angular side, take a look maybe you can help to solve it. I think we are very close :).

• javascript
• html
• angularjs
• polymer
• web-ponent

• Having the same problem. A workaround I found was to create an attribute listener e.g. angupolyChanged: function(n,o){//set stuff} to set values. But changes are not propagating out of the ponent yet... – furier Commented Aug 7, 2014 at 13:07
• 1 check out following project for double binding. I just had some success with this yesterday: github./GabiAxel/ng-polymer-elements – amit Commented Aug 15, 2014 at 7:06
• I'm trying to bind to backbone models, do you think it will be possible? stackoverflow./questions/25816912/… – Nikos Commented Sep 12, 2014 at 21:48

5 Answers 5

Here is an updated example http://plnkr.co/w1icAU

With Polymer 1.0 two way binding is much simpler and also able to bind objects not just string values.

Here is the main part

<x-kid ng-repeat="kid in ::kids" angupoly="{name:'kid.name', age:'kid.age'}"></x-kid>

I think it is because of some kind of reference.

How should I explain, just like you work with object in scope in data binding. when you update the object to a new object, the UI will not update with new object values.

It looks that Material Design is THE answer, excerpt:

Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.

Maybe you could find clues from this blog even if its aim is for dart:

Angular and Polymer Data Binding, Together!

Also take a look at ng-polymer, this project may help give you some insight