JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="myApp" class="container">
  <my-parent></my-parent>
</div>

JavaScript

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

angular.
module('myChild', []).
component('myChild', {
    template: `<div class="panel panel-default" ng-class="isPrimary == true ? 'panel-primary' : ''">` +
    '<div class="panel-heading">Child</div>' +
    '<div class="panel-body">' +
    'Child content...' +
    '</div>' +
    '</div>',
  bindings: {
  },
  controller: ['$scope', '$element',
    function myChildController($scope, $element) {
    	$scope.$parent.children.push($scope);
    }
  ]
});

angular.
module('myParent', ['myChild']).
component('myParent', {
  template: '<div class="panel panel-default">' +
    '<div class="panel-heading">Parent</div>' +
    '<div class="panel-body">' +
    '<my-child></my-child>' +
    '<hr />' +
    '<my-child></my-child>' +
    '</div>' +
    '</div>' +
    '<button ng-click="$ctrl.makePrimary()">Make Primary</button>',
  bindings: {
    makePrimary: '&'
  },
  controller: ['$scope', '$element',
    function myParentController($scope, $element) {
    
    var ctrl = this;
    
    $scope.children = [];
    
    ctrl.makePrimary = function(){
    	$scope.children[1].isPrimary = true;
    }
    
    }
  ]
});