$watch obiekt jest dostępny wewnątrz $scope obiektu, więc musisz dodać $scope wewnątrz funkcji fabrycznej kontrolera i umieścić watcher nad zmienną.

$scope.$watch(function(){
    return myBox.game;
}, function(newVal){
   alert('Value changed to '+ newVal)
});

Demo Tutaj

Uwaga: wiem, że przekonwertowałeś directive na component, aby usunąć zależność $scope, aby zbliżyć się o krok do Angular2 Ale wygląda na to, że nie został usunięty w tej sprawie.

Update

Zasadniczo angular 1.5 nie dodaje metody .component rozróżnia dwie różne funkcjonalności. Jak component.oznacza wykonanie określonego behaviby adding selector, gdzie as directive oznacza dodanie określonego zachowania do DOM. Dyrektywa jest tylko metodą wrappera na .directive DDO (Directive Definition Object). Jedyne, co możesz zobaczyć, to to, że mieli funkcję Usuń link/compile podczas korzystania z metody .component, w której miałeś możliwość uzyskania kątowego skompilowanego DOM.

Użyj $onChanges/$doCheck lifecycle hook of Angular component lifecycle hook, te będą dostępne po wersji Angular 1.5.3+.

$onChanges (changesObj) - wywoływane zawsze, gdy wiązania są aktualizowane. ChangesObj to hash, którego klucze są nazwami powiązanych właściwości.

$doCheck () - wywoływane na każdym kroku cyklu digest podczas zmiany wiązania. Umożliwia wykrywanie zmian i reagowanie na nie.

Używając tej samej funkcji wewnątrz komponentu zapewni zgodność kodu, aby przejść do kątowej 2.

Dla wszystkich zainteresowanych moim rozwiązaniem, kończę uciekając się do Rxjs Observables, których będziesz musiał użyć, gdy dojdziesz do Angular 2. Oto działający skrzypek do komunikacji między komponentami, daje mi większą kontrolę nad tym, co oglądać.

Js FIDDLE RXJS Observables

class BoxCtrl {
    constructor(msgService) {
    this.msgService = msgService
    this.msg = ''

    this.subscription = msgService.subscribe((obj) => {
      console.log('Subscribed')
      this.msg = obj
    })
    }

  unsubscribe() {
    console.log('Unsubscribed')
    msgService.usubscribe(this.subscription)
  }
}

var app = angular
  .module('app', ['ngMaterial'])
  .controller('MainCtrl', ($scope, msgService) => {
    $scope.name = "Observer App Example";
    $scope.msg = 'Message';
    $scope.broadcast = function() {
      msgService.broadcast($scope.msg);
    }
  })
  .component("box", {
    bindings: {},
    controller: 'BoxCtrl',
    template: `Listener: </br>
    <strong>{{$ctrl.msg}}</strong></br>
    <md-button ng-click='$ctrl.unsubscribe()' class='md-warn'>Unsubscribe A</md-button>`
  })
  .factory('msgService', ['$http', function($http) {
    var subject$ = new Rx.ReplaySubject();
    return {
      subscribe: function(subscription) {
        return subject$.subscribe(subscription);
      },
      usubscribe: function(subscription) {
        subscription.dispose();
      },
      broadcast: function(msg) {
        console.log('success');
        subject$.onNext(msg);
      }
    }
  }])

Małe ostrzeżenie dotyczące stosowania ng-change, zgodnie z zaleceniami z zaakceptowaną odpowiedzią, wraz ze składnikiem kątowym 1,5.

W przypadku, gdy musisz obserwować komponent, który nie działa ng-model i ng-change, możesz przekazać parametry jako:

Znaczniki, w których składnik jest używany:

<my-component on-change="$ctrl.doSth()"
              field-value="$ctrl.valueToWatch">
</my-component>

Składnik js:

angular
  .module('myComponent')
  .component('myComponent', {
    bindings: {
      onChange: '&',
      fieldValue: '='
    }
  });

Znaczniki komponentu:

<select ng-model="$ctrl.fieldValue"
        ng-change="$ctrl.onChange()">
</select>

Dostępny w IE11, MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver . musisz wprowadzić usługę $ element do kontrolera, która częściowo łamie separację DOM/kontroler, ale uważam, że jest to podstawowy wyjątek (np. wada) w angularjs. Ponieważ hide / show jest asynchroniczny, potrzebujemy on-show callback, że angularjs & angular-Bootstrap-tab nie zapewniają. Wymaga również, aby u wiedział, który konkretny element DOM chcesz obserwować. Użyłem poniższego kodu do angularjs kontroler do wyzwalania Highcharts chart reflow on-show.

const myObserver = new MutationObserver(function (mutations) {
    const isVisible = $element.is(':visible') // Requires jquery
    if (!_.isEqual(isVisible, $element._prevIsVisible)) { // Lodash
        if (isVisible) {
            $scope.$broadcast('onReflowChart')
        }
        $element._prevIsVisible = isVisible
    }
})
myObserver.observe($element[0], {
    attributes: true,
    attributeFilter: ['class']
})

Naprawdę ładna, przyjęta odpowiedź, ale dodam, że można również użyć mocy zdarzeń(trochę jak w Qt signal / slots jeśli chcesz ).

Transmitowane jest Wydarzenie: $rootScope.$broadcast("clickRow", rowId) przez każdego rodzica ( a nawet dzieci). Następnie w kontrolerze możesz obsłużyć Zdarzenie w następujący sposób:

$scope.$on("clickRow", function(event, data){
    // do a refresh of the view with data == rowId
});

Możesz też dodać trochę logowania w ten sposób ( wzięte stąd : https://stackoverflow.com/a/34903433/3147071 )

var withLogEvent = true; // set to false to avoid events logs
app.config(function($provide) {
    if (withLogEvent)
    {
      $provide.decorator("$rootScope", function($delegate) {
        var Scope = $delegate.constructor;
        var origBroadcast = Scope.prototype.$broadcast;
        var origEmit = Scope.prototype.$emit;

        Scope.prototype.$broadcast = function() {
          console.log("$broadcast was called on $scope " + this.$id + " with arguments:",
                     arguments);
          return origBroadcast.apply(this, arguments);
        };
        Scope.prototype.$emit = function() {
          console.log("$emit was called on $scope " + this.$id + " with arguments:",
                     arguments);
          return origEmit.apply(this, arguments);
        };
        return $delegate;
      });
    }
});

Jestem spóźniona. Ale może pomóc innym ludziom.

app.component("headerComponent", {
    templateUrl: "templates/header/view.html",
    controller: ["$rootScope", function ($rootScope) {
        let $ctrl = this;
        $rootScope.$watch(() => {
            return $ctrl.val;
        }, function (newVal, oldVal) {
            // do something
        });
    }]
});