title: Angularjs: call other scope which in iframe
body: <p>In my test, given 2 document, A and B. In A document, there is an iframe, the iframe source is B document. My question is how to modify B document certain scope of variable?</p>
  
  <p>Here is my code: A document</p>
  
  <p></p>
  
  <pre><code>&lt;html lang="en" ng-app=""&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Google Phone Gallery&lt;/title&gt;
    &lt;script type='text/javascript' src="js/jquery-1.10.2.js"&gt;&lt;/script&gt;
    &lt;script type='text/javascript' src="js/angular1.0.2.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    var g ;
  function test($scope,$http,$compile)
  {
      $scope.tryget = function(){
  
          var iframeContentWindow = $("#iframe")[0].contentWindow;
          var iframeDOM = $("#iframe")[0].contentWindow.document;
          var target = $(iframeDOM).find("#test2");
          var iframeAngular = iframeContentWindow.angular;
          var iframeScope = iframeAngular.element("#test2").scope();
          iframeScope.parentcall();
          iframeContentWindow.angular.element("#test2").scope().tempvalue = 66 ;
          iframeScope.tempvalue = 66;
          iframeContentWindow.tt = 22;
          iframeScope.parentcall();
          console.log(iframeScope.tempvalue);
          console.log(angular.element("#cont").scope());
      }
  }
  
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div ng-controller="test"&gt;
          &lt;div id="cont" &gt;
              &lt;button ng-click="tryget()"&gt;try&lt;/button&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;iframe src="test2.html" id="iframe"&gt;&lt;/iframe&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My B document:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app=""&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Google Phone Gallery&lt;/title&gt;
    &lt;script type='text/javascript' src="js/jquery-1.10.2.js"&gt;&lt;/script&gt;
    &lt;script type='text/javascript' src="js/angular1.0.2.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
  var tt =11;
  function test2($scope,$http,$compile)
  {
      console.log("test2 controller initialize");
      $scope.tempvalue=0;
      $scope.parentcall = function()
      {
          $scope.tempvalue = 99 ;
          console.log($scope.tempvalue);
          console.log(tt);
      }
  }
  
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div ng-controller="test2" id="test2"&gt;
          &lt;div id="cont" &gt;
              &lt;button ng-click="parentcall()"&gt;get script&lt;/button&gt;
          &lt;/div&gt;
          {{tempvalue}}
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Note: Actually there is some way to do it, which i feel it like a hack instead of proper way to get it done:
  that is create a button in b Document, and then bind with angularjs ng-click. After that A document jquery "trigger" click on button.</p>