How can I Pass data from an Angular Controller to JavaScript or to Paper.js

Question

How can I Pass data from an Angular Controller to Paper.js via JavaScript ?

This is a question nearly identical to this previous question:

Pass Angular scope variable to Javascript

The first answer to the previous question would not work for me (I show it below) and I dont clearly understand the second answer(which is a workaround too)

edit: I figured out a bit cheesy solution that allows passing values from Angular to Javascript: I know it isn't the Angular way and likely has some other shortcomings (and I'd be more than happy to have them called out)-- I'm showing it in an answer below)

Is a new answer available now, two years later?

Maybe there is a paper.js direct method? (earlier question didn't pertain to paper.js)

My code and circumstance details below:

// snippet frome angular controller named "colorSelector"

 $scope.xCoor = image.xCoor; 
 $window.xCoor = image.xCoor; //hoped this would work but doesn't


//angular works fine in the html


  <p> {{description}}</p>
  <p>{{xCoor}} is the X coordinate, {{yCoor}}</p>

edit: removed ng-repeat wrapper as it didn't apply directly to question.(second edit cleaned that up more)

//paper.js successfully has access to global JS variables, but
//I cannot get angular information into the JavaScript variables
<script type="text/javascript">
  targetX = 250; targetY=270; //hardwired works (I'm only using x for example)

  // targetX = {{image.xCoor}} doesn't work (no surprise)
  // targetX = window.xCoor // I thought this might work? but it doesn't
  // suggestion below from earlier S.O. question doesn't work for me
  // targetX =  angular.element(document.querySelector('[ng-controller="colorSelector"]')).scope().xCoor
    </script>

<!-- paper.js section below -->
<script type="text/paperscript" canvas="myCanvas">
    //below works if variables are set above
    var target = new Path.Circle({
      center: [targetX, targetY],
      radius: 10,
      strokeColor: "white"
    });
</script>

If the "workaround" way of the second answer to the previous question still works, could someone flesh it out a bit for me? (they suggested inserting a string with script tags in it?)

Answer 1

I figured out a simple work-around(not sure why it took so long) I know it isn't the Angular way and likely has some other shortcomings (and I'd be more than happy to have them called out)

// un-shown angular module defines $scope.xCoor

<div id="xCoor" class="hide-me-offscreen">
  {{x-coor}}
</d>

<script type="text/javascript" >
  var targetX = num(getElementById("x-coor").html)
</script>