Proper way to let parent bind children's data?

[fnlctrl]

Consider this example:

<tabs>
  <tab label="Followers" some-magic-prop-or-directive="{{ number }}">
    <followers></followers>
  </tab>
  <tab label="Messages"  some-magic-prop-or-directive="{{ number }}">
    <messages></messages>
  </tab>
</tabs>

that gets rendered as

<tabs>
  <tabs-pagination>
      <span>Followers 123</span>   <!-- Note the numbers here -->
      <span>Messages 456</span>
  <tabs-pagination>
  <tab label="Followers">
    <followers></followers>
  </tab>
  <tab label="Messages">
    <messages></messages>
  </tab>
</tabs>

Now, as the tabs need child component's data to display the numbers, and the numbers are fetched from api (so the data should be two-way binded), what is the proper way to get it?

Using props + callbacks needs to define a prop inside each child component, Using directives won't get the data binded...

The only way I can think of now, is setting up watches inside each child component, that $dispatchs the new value upwards..

[fnlctrl]

Problem solved by getting the number from parent vm, instead of child components. The proper way is to set a prop number and a watch within tab: number gets data from vm, while watch $dispatch new values upwards to tabs