$ watches do not work inside Angular Modal

Question

I am trying to set $ watch to a radio button inside AngularJS Modal . However, $ watch does not work inside the modal for any value changes.

If I try to put the switches outside the modal, the $ clock works fine.

http://plnkr.co/edit/q8t9qGJg57MMiQGop202?p=preview

In the above plunkr, if you click "Open Me" and select the top 2 switches (me, you) $, the clock does not start and, in turn, sees a warning with a value.

However, if you click on the switches on the main page (that is, on an external window), $ watch works fine and displays a warning message.

Does anyone have a workaround for this problem? Thanks

Answer 1

This is a sign of an unofficial golden rule violation when using ng-model:

Always is "." in ng-model expression

If you do not have a point in the ng-model expression, it will create a property in the current area at the point where the element with ng-model is located. This is often not the area you expect, since many directives create child areas, including the modal directive from UI Bootstrap.

Including a point, you refer to an object that will be viewed in the chain of prototypes (areas), and then will have access to or create a property on it that will be in the correct area.

, , , $scope.data ng-model data.rdd, "" .

, :

  $scope.data = {
    rdd: 'me'
  };

  $scope.$watch('data.rdd', function(v, old){
    if(v!==undefined && v !== old)
      alert(v);
  }); 

HTML :

        <input type="radio" ng-model="data.rdd" value="me">me
        <input type="radio" ng-model="data.rdd" value="you">you

I Plunkr, .