Command a specific child component from parent in AngularJS
<p>I'm using AngularJS 1.5.8.
I have "myParent" and "myChild" components.
In my view, i've 1 parent and 2 children inside that parent.
So my question is: I wanna have instances of children "myChild" components in "myParent" component's controller, and <strong>give a command to only a specific child</strong> to makePrimary(), or like that... How can i achive this goal?</p>

<p>JS:</p>

<pre><code>//var myApp = 
angular.module('myApp', ['myChild', 'myParent']);

angular.
module('myChild', []).
component('myChild', {
  template: '&lt;div class="panel panel-default"&gt;' +
    '&lt;div class="panel-heading"&gt;Child&lt;/div&gt;' +
    '&lt;div class="panel-body"&gt;' +
    'Child content...' +
    '&lt;/div&gt;' +
    '&lt;/div&gt;',
  controller: ['$scope', '$element',
    function myChildController($scope, $element) {

    }
  ]
});

angular.
module('myParent', ['myChild']).
component('myParent', {
  template: '&lt;div class="panel panel-default"&gt;' +
    '&lt;div class="panel-heading"&gt;Parent&lt;/div&gt;' +
    '&lt;div class="panel-body"&gt;' +
    '&lt;my-child&gt;&lt;/my-child&gt;' +
    '&lt;hr /&gt;' +
    '&lt;my-child&gt;&lt;/my-child&gt;' +
    '&lt;/div&gt;' +
    '&lt;/div&gt;',
  controller: ['$scope', '$element',
    function myParentController($scope, $element) {

    // TODO: MAKE CHILD-2 ".panel-primary" CLASS IN HERE.
    // BUT ONLY A SPECIFIC CHILD!

    }
  ]
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div ng-app="myApp" class="container"&gt;
  &lt;my-parent&gt;&lt;/my-parent&gt;
&lt;/div&gt;
</code></pre>

<p>JSFIDDLE for sample:
<a href="https://jsfiddle.net/zhc12t1a/4/" rel="nofollow noreferrer">https://jsfiddle.net/zhc12t1a/4/</a></p>

<p>I inspected some related questions like:</p>

<ul>
<li><a href="https://stackoverflow.com/questions/19038778/angularjs-how-to-call-child-scope-function-in-parent-scope">angularJS: How to call child scope function in parent scope</a></li>
<li><a href="https://stackoverflow.com/questions/13428042/angularjs-access-to-child-scope">AngularJS - Access to child scope</a></li>
</ul>

<p>But i can't find a proper way to achive this goal with a simple architecture.</p>

<p><strong>EDIT</strong></p>

<p>I know some complicated methods (from architectural perspective) but i don't want to use them. For example: </p>

<p>Using $parent or</p>

<p>in myParentController:</p>

<pre><code>$scope.makeChild1Primary = function () {} 
</code></pre>

<p>in myParent template:</p>

<pre><code>&lt;my-child make-primary="makeChild1Primary"&gt;&lt;/my-child&gt;
</code></pre>

<p>in myChild component</p>

<pre><code>//...
var ctrl = this;
ctrl.makePrimary = function () { /* MAKE PRIMARY LOGIC HERE... */ }
//...
,bindings: {
makePrimary: '='
}
</code></pre>