How to set angular variable value from JavaScript on Zeppelin

Question

I am doing a visualization using D3 on zeppelin and I need to link Scala variable with javascript one.

In a simple way, I have the following three paragraphs:

1)

z.angularUnbind("aux")
z.angularBind("aux", "original value")

2)

%angular
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>

<script>
function myFunction() {
    if (document.getElementById("demo").innerHTML === ""){
       document.getElementById("demo").innerHTML = "Hello World";
       aux = "If"
    }else{
        document.getElementById("demo").innerHTML = "";
        aux = "Else"
    }
}
</script>

3)

z.angular("aux")

And I hope the following results:

1. Before click on "Click me" button I hope: aux = "original value".

2. After one click on "Click me" button I hope: aux = "If"

3. After two click on "Click me" button I hope: aux = "Else"

How to link javascript "aux" variable with angular's "aux"?

Answer 1

I finally found how to do that:

Paragraph 1) and 3) are equal to those showed in question. Into pragraph 2) aux variable is modified by write in a angularjs input field and reacting on change with z.angularBind(..) method. It allows to bind aux variable with another value. z.angularBind(..) method's third argument is the identifier of paragraph 3).

2)

%angular
<button onclick="myFunction()">Click me</button>
<input id="tb" class="hide"  ng-model="aux" ng-change="z.angularBind('aux',aux,'20161224-171923_464920272')"></input>
<p id="demo"></p>

<script>
function myFunction() {
    var element = $('#tb');
    if (document.getElementById("demo").innerHTML === ""){
       document.getElementById("demo").innerHTML = "Hello World";
       element.val("If");
    }else{
        document.getElementById("demo").innerHTML = "";
        element.val("Else");
    }
    window.setTimeout(function() {
        return element.trigger('input');
    }, 500);
}
</script>