Polymer-AngularJS двусторонняя привязка данных

У меня есть какой-то пользовательский элемент, созданный сполимер, Давайте назовем это x-input, и это выглядит так:

<polymer-element name="x-input" attributes="name">
    <template>
        <input type="text" value={{name}}> <span>{{name}}</span>
        <br />
        <input type="range" value={{age}} > <span>{{age}}</span>
    </template>
 </polymer-element>

И у меня есть этот HTML, я использую Angular:

<html ng-app="testApp">
    <body ng-controller="AppCtrl">
        <input id="outer_input" type="text" ng-model="kids[0].name" value={{kids[0].name}} /> <br />
        <span>name: {{kids[0].name}} age: {{kids[0].age}}</span><br />
        <x-input ng-repeat="kid in kids" name={{kid.name}} age={{kid.age}}>
        </x-input>
    </body>
</html>

Вот JS:

var testApp = angular.module('testApp', []);

testApp.controller('AppCtrl', function ($scope, $http)
{
    $scope.kids = [{"name": "Din", "age": 11}, {"name": "Dina", "age": 17}];
}

Проблема заключается в двустороннем связывании данных. Когда я меняю#outer_input входное значение x-входные внутренние значения (имя и возраст) изменены.

Но когда я изменяю пользовательский элемент ввода, меняются только внутренние переменные.

Как я могу изменить значение связанной переменной внутри полимерного элемента, и это изменит модель и весь внешний интерфейс и данные (двустороннее связывание)?

Спасибо

Ответы на вопрос(5)

Ваш ответ на вопрос