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 ng-class="{\'panel-primary\': $ctrl.isPrimary, \'panel-default\': !$ctrl.isPrimary}" class="panel">' +
    '<div class="panel-heading">Child</div>' +
    '<div class="panel-body">' +
    'Child content...' +
    '</div>' +
    '</div>',
  controller: ['$scope', '$element',
    function myChildController($scope, $element) {
      $scope.$watch('$ctrl.isPrimary', function(newVal) {
        alert("CHANGE DETECTED BY CHILD\n$ctrl.isPrimary: " + newVal);
      })
    }
  ],
  bindings: {
    isPrimary: '<'
  }
});

angular.
module('myParent', ['myChild']).
component('myParent', {
  template: '<div class="panel panel-default">' +
    '<div class="panel-heading">Parent</div>' +
    '<div class="panel-body">' +
    '<button type="button" ng-click="child1Primary = true" >Child-1 primary</button><br />' +
    '<button type="button" ng-click="child1Primary = false">Child-1 default</button><br />' +
    '<button type="button" ng-click="child2Primary = true" >Child-2 primary</button><br />' +
    '<button type="button" ng-click="child2Primary = false">Child-2 default</button><br />' +
    '<br />' +
    '<my-child is-primary="child1Primary"></my-child>' +
    '<hr />' +
    '<my-child is-primary="child2Primary"></my-child>' +
    '</div>' +
    '</div>',
  controller: ['$scope', '$element',
    function myParentController($scope, $element) {
      $scope.child1Primary = false;
      $scope.child2Primary = false;
    }
  ]
});