Angularjs: call other scope which in iframe

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?

Here is my code: A document

<html lang="en" ng-app="">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <script type='text/javascript' src="js/jquery-1.10.2.js"></script>
  <script type='text/javascript' src="js/angular1.0.2.min.js"></script>
  <script>
  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());
    }
}

  </script>
</head>
<body>

<div ng-controller="test">
        <div id="cont" >
            <button ng-click="tryget()">try</button>
        </div>
</div>
<iframe src="test2.html" id="iframe"></iframe>

</body>
</html>

My B document:

<!doctype html>
<html lang="en" ng-app="">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <script type='text/javascript' src="js/jquery-1.10.2.js"></script>
  <script type='text/javascript' src="js/angular1.0.2.min.js"></script>
  <script>
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);
    }
}

  </script>
</head>
<body>

<div ng-controller="test2" id="test2">
        <div id="cont" >
            <button ng-click="parentcall()">get script</button>
        </div>
        {{tempvalue}}
</div>

</body>
</html>

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.

Solution

To access and communicate in two directions (parent to iFrame, iFrame to parent), in case they are both in the same domain, with access to the angular scope, try following those steps:

*You don’t need the parent to have reference to angularJS library…

Calling to child iFrame from parent

1.Get child iFrame element from the parent (link to answer):

document.getElementById("myIframe").contentWindow

2.Access the scope of the element:

document.getElementById("myIframe").contentWindow.angular.element("#someDiv").scope()

3.Call the scope’s function or property:

document.getElementById("myIframe").contentWindow.angular.element("#someDiv").scope().someAngularFunction(data);

4.Call $scope.$apply after running the logic of the function/updating the property (link to Mishko’s answer):

$scope.$apply(function () { });

Another solution is to share the scope between the iFrames, but then you need angular in both sides: (link to answer and example)

Calling parent from child iFrame

Calling the parent function:

parent.someChildsFunction();

Will update also on how to do it cross domain if it is necessary..