Component Method

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">
  <script type="text/ng-template" id="/template">
    <div style='width:40%;border:2px solid black;background-color:yellow'>
      Your Favourite game is: {{myBox.game}}
      <game game='myBox.game'></game>
    </div>
  </script>
  
 <script type="text/ng-template" id="/template2">
    <div>
    </br>
    	Change Game
      <textarea ng-model='game.game'></textarea>
    </div>
  </script>
  
  Hi {{name}}
  <my-box name="name">
    
  </my-box>
  
</div><!--end app-->

JavaScript

var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope) {
    
   $scope.name = "Tony Danza";
  
});

app.component("myBox",  {
      bindings: {},
      controller: function($element, $scope) {
        var myBox = this;
        $scope.$watch(function(){
          return myBox.game;
        }, function(newVal){
          alert('Value changed to '+ newVal)
        });
        myBox.game = 'World Of warcraft';
        //IF myBox.game changes, show alert message 'NAME CHANGE'
      },
      controllerAs: 'myBox',
      templateUrl: "/template",
      transclude: true
})
app.component("game",  {
      bindings: {game:'='},
      controller: function($element) {
        var game = this;
        
       
      },
      controllerAs: 'game',
      templateUrl: "/template2"
})