title: Input radio ng-model not updated after all
body: <p>I try to solve a puzzle why an ng-model of input[radio] controls is not set as I expect.
  When a page is loaded all radios are initiated correctly. Clicking on different controls changes the radioVal variable - its value is rendered in the page. </p>
  
  <p>The problem is that it looks like it takes place only in a DOM. When I debug the code the <code>$scope.radioVal</code> is always the same ... 
  The isolated scope of <code>modalDialog</code> does not contain the <code>radioVal</code> property.</p>
  
  <p>In which scope the radio <code>ng-model</code> is created ? Is it a different instance of it?</p>
  
  <hr>
  
  <p>The working code can be found <a href="http://jsfiddle.net/gvlax/WqGs6/" rel="nofollow">here on jsfiddle</a>.</p>
  
  <hr>
  
  <p>My html code is:</p>
  
  <pre><code>&lt;div ng-app = "app"&gt; 
   &lt;div ng-controller="mainCtrl"&gt;         
     &lt;a ng-click="showModalDlg()"&gt;Click me&lt;/a&gt;
     &lt;br/&gt;&lt;br/&gt;
     &lt;modal-dialog show="showModal" action="actionFun"&gt;                        
      &lt;form&gt;
        &lt;input type="radio" ng-model="radioVal" value="1"&gt;One&lt;br/&gt;
        &lt;input type="radio" ng-model="radioVal" value="nothing changes me"&gt;Two&lt;br/&gt;
        &lt;input type="radio" ng-model="radioVal" value="3"&gt;Three&lt;br/&gt;
            &lt;br/&gt;&lt;br/&gt;
            The model changes in the DOM as expected: &lt;b&gt;radioVal = {{radioVal | json}}&lt;/b&gt;
            &lt;br/&gt;
            but by pressing the Action button you can see that the model has not been modified. 
      &lt;/form&gt;                        
      &lt;a class="button" action&gt;Action&lt;/a&gt;                     
      &lt;/modal-dialog&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My angular code:</p>
  
  <pre><code>angular.module('common', [])
      .controller('mainCtrl', ['$scope', function($scope){
  
          $scope.showModal = false;
          $scope.radioVal = "nothing changes me";
  
          $scope.showModalDlg = function() {
             $scope.showModal = !$scope.showModal;
          };
  
          $scope.actionFun = function() {
             console.log('actionFun ...' + $scope.radioVal);
          };        
  
      }]).directive('modalDialog',
          function () {
              return {
                 restrict: 'E',
                 scope: {
                    show: '=',
                    action: '&amp;',
                 },
                 replace: true,
                 transclude: true,
                 link: function (scope, element, attrs) {
  
                          scope.hideModal = function () {
                             scope.show = false;
                             scope.$apply();
                          };
  
                          $('a[hide]', element).on('click', function(){
                             scope.hideModal();
                          });
  
                          $('a[action]', element).on('click', function(){
                             console.log('There is no radioVal in isolated scope either ... ' + scope.radioVal);
                             scope.action()();
                             scope.hideModal();
                          });
                    },
              template: '&lt;div class=\'ng-modal\' ng-show=\'show\'&gt;&lt;div class=\'ng-modal-overlay\'&gt;&lt;/div&gt;&lt;div class=\'ng-modal-dialog\' ng-style=\'dialogStyle\'&gt;&lt;div class=\'ng-modal-dialog-content\' ng-transclude&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
          }
      });
  
    angular.module('app', ['common'])
  </code></pre>