How to dynamically add a div using interact.js and then fill it with values via angular.js

Question

I am trying to add a new div dynamically using interact.js and then fill it with values using angular.js. I add the div in the js code line 67-80 in the function: oninertiastart

However, the output is simply {{vals['pressure']}} (i have tried to access the variable in vals in several different ways. It seems I am missing something in the link. Can you help me?

var app = angular.module('DAQMonitor', ['ui.bootstrap']);

app.service('api', function($http) {

    this.get_status = function(success, error) {
        return $http.get('/api/status')
    }
})

app.controller('C', function($scope, api, $interval) {


    var poll = function() {
      $scope.vals = {
        values: ["coll1", "coll2", "coll3", "coll4", "pressure"],
        coll1: 2,
        coll2: 3,
        coll3: 4,
        coll4: 5,
        pressure: 6
    };
     //api.get_status()
      //   .success(function (data) {
         //       $scope.vals = data.values;
//
         //       $scope.connected = true;
//
        // })
         //.error(function() {
         //    $scope.connected = false;
         //})
 }
    //
    poll()
    $interval(poll,1000);
});


var startX, startY;
interact('.drag')
    .draggable({

    snap: {
      targets: [
        interact.createSnapGrid({ x: 30, y: 30 })
      ],
      range: Infinity,
      relativePoints: [ { x: 0, y: 0 } ]
    },

    // enable inertial throwing
 inertia: true,
    // keep the element within the area of it's parent
 restrict: {
     restriction: "parent",
     endOnly: true,
     elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
 },
 onstart: function(event) {
     startX = event.pageX;
     startY = event.pageY

 },
    // enable autoScroll
 autoScroll: true,
    oninertiastart: function (event) {
        var id = event.target.getAttribute("id");
        var div = document.createElement('div');
        div.setAttribute("id",id+"_s")
        var header = document.createElement('div');
        header.className = "scaler-header";
        header.innerHTML = id;
        var number = document.createElement('div');
        number.className = "scaler-number";
        number.innerHTML = "{{vals['pressure']}}";
        div.appendChild(header);
        div.appendChild(number);
        var canvas = document.getElementById('canvas');
        div.className = 'resize-drag scaler';
        canvas.appendChild(div);

        // keep the dragged position in the data-x/data-y attributes
        x = event.target.getAttribute('data-x') - canvas.offsetLeft;
        y = startY - canvas.offsetTop;

        div.style.webkitTransform =
        div.style.transform =
     'translate(' + x + 'px, ' + y + 'px)';

        div.setAttribute('data-x', x);
        div.setAttribute('data-y', y);
 },
    // call this function on every dragmove event
 onmove: dragMoveListener,
    // call this function on every dragend event
 onend: function (event) {
     var textEl = event.target.querySelector('id');
 }
    });

function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
    x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
    y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
 'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
}

.resize-drag {
  background-color: #29e;
  color: white;
  font-family: sans-serif;
  border-radius: 8px;

  width: 120px;

  /* This makes things *much* easier */
  box-sizing: border-box;
}

.resize-container {
  width: 100%;
  height: 100%;
}

.scaler {
  width: 100px;
  height: 100px;
}

.scaler-header {
height: 20%;
width:100%;
overflow: hidden;
font-size: 100%;
text-align: center;
}

.scaler-number {
height: 80%;
width:100%;
overflow: hidden;
font-size: 100%;
text-align: center;
}

<script src="//cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script>
<html>
<head>


</head>

<body ng-app = "DAQMonitor" ng-controller="C">

<table>
    <tr ng-repeat="val in vals">
        <th>
            <div id="{{val}}" class="drag"> {{val}} </div>
        </th>
    </tr>
</table>

<div id="canvas" class="resize-container">

</div>



</body>

<!--<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="interact.js"></script>
<script src="script2.js"></script>
<link href="style.css" rel="stylesheet">
</html>