title: Command a specific child component from parent in AngularJS
body: <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>