angular 1.5 component router pass values or callbacks between components
<p>I created app with angularjs 1.5 component router, how could I let parent component pass values to child component inside  and child component binds callbacks to the parent component like:</p>

<p>app.js </p>

<pre><code>   angular.module('newsApp',['ngComponentRouter'])
            .config(['$locationProvider', function($locationProvider) {
                $locationProvider.html5Mode(true);
            }])
            .value('$routerRootComponent', 'myNews') 
</code></pre>

<p>components.js</p>

<pre><code>angular.module('newsApp')
    .component('myNews', {
        templateUrl: '/myNews.html',
        controller: ['newsFactory',ShamraNewsCtrl],

        $routeConfig: [
            {path: '/',    name: 'MyLatestNews',   component: 'myLatestNews', useAsDefault: true},
            {path: '/:category', name: 'MyNewsList', component: 'myNewsList'},
        ]
    }).component('myLatestNews', {
        templateUrl: '/latestNews.html',
        controller: ['newsFactory', myLatestNewsCtrl],
    }).component('myNewsList', {
        templateUrl: '/newsList.html',
        controller: ['newsFactory', myNewsListCtrl],
    })
</code></pre>

<p>myNews.html</p>

<pre><code>&lt;div class="input-group"&gt;
                &lt;input type="text" class="form-control" ng-bind="$ctrl.query" placeholder="Search for..."&gt;
                &lt;span class="input-group-btn"&gt;
                    &lt;button class="btn search-btn btn-success" type="submit"&gt;
                        &lt;i class="fa fa-search"&gt;&lt;/i&gt;
                    &lt;/button&gt;
                &lt;/span&gt;
            &lt;/div&gt;
&lt;div&gt;
            &lt;div class="sh-news-cat list-group"&gt;
                &lt;a ng-repeat="(key, catVal) in $ctrl.categories" class="list-group-item" ng-class="{active:$ctrl.select.selected == key}" ng-link="['MyNewsList', {category: key}]"&gt;
                    {{ catVal}}
                    &lt;span ng-show="$ctrl.selected.spinner == key"&gt;&lt;i class="fa-lg fa fa-spinner fa-spin"&gt;&lt;/i&gt;&lt;/span&gt;
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;ng-outlet&gt;&lt;/ng-outlet&gt;
        &lt;/div&gt;
</code></pre>

<p>latestNews.html</p>

<pre><code>&lt;div class="last-news-container"&gt;
    &lt;div class="latest-news" ng-repeat="(key, newsList) in $ctrl.latestNews"&gt;
        &lt;h3 class="section-title"&gt;
            {{ newsList.title}}
        &lt;/h3&gt;
        &lt;hr&gt;
        &lt;div class="section-body"&gt;
            &lt;div class="news-item" ng-repeat="sectionList in newsList.result"&gt;
                &lt;div class="news-info"&gt;
                    &lt;h3&gt;{{ sectionList.title }}&lt;/h3&gt;
                    &lt;p&gt;{{ sectionList.content }}&lt;/p&gt;

                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="more-news"&gt;
            &lt;a ng-link="['MyNewsList', {category: key}]" ng-hide="$ctrl.seemore"&gt; see more ... &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>so when I click on seeMore in latestNews.html I want to (sent to OR change) category value in  <strong>myNews</strong> Component </p>

<p>and when use type in input box i need to pass this value to another component </p>