Untitled

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <button ng-click="testClick()">Test Click</button>
    <my-directive ng-repeat="sensor in sensors track by sensor.sensor_name" sensor-name="{{ sensor.sensor_name }}" display-name="{{ sensor.display_name }}" state-normal="{{ sensor.stateNormal }}" state-alert="{{ sensor.stateAlert }}" state-total="{{ sensor.total }}">
    </my-directive>
  </div>
</body>

</html>

var app = angular.module('myApp', []);

app.directive("myDirective", function() {
  return {
    restrict: 'EAC',
    controller: function($scope) {
      $scope.states = {
        "Normal": $scope.stateNormal ? $scope.stateNormal : 'x',
        "Alert": $scope.stateAlert ? $scope.stateAlert : 'x',
        "Total": $scope.stateTotal ? $scope.stateTotal : 'x'
      };

    },
    templateUrl: "my-directive.php",
    scope: {
      sensorName: '@',
      displayName: '@',
      stateNormal: '@',
      stateAlert: '@',
      stateTotal: '@'
    }
  };
});

app.controller("myCtrl", ['$scope',
  function($scope) {
    $scope.sensors = [{
      sensor_name: "stre",
      display_name: "Stre"
    }];

    var initState = {
      normal: "0",
      alert: "0"
    };

    var setInitState = function(sensors) {
      for (let i = 0; i < sensors.length; i++) {
        sensors[i]["stateNormal"] = "0";
        sensors[i]["stateAlert"] = "0";
        sensors[i]["total"] = "0";
      }
      return sensors;
    };

    $scope.sensors = setInitState($scope.sensors);

    $scope.testClick = function() {
      $scope.sensors[0].display_name = "testchange";
      $scope.sensors[0].stateNormal = "15";
      $scope.sensors[0].total = "38";

      console.log(34, $scope.sensors[0]);
      // });
    };
  }
]);

/* Styles go here */


<div>
  <span>{{ displayName }}</span>
</div>
<div>
    Normal
</div>
<div>
    {{ states["Normal"] }}
</div>
<div>
    Alert
</div>
<div>
    {{ states["Alert"] }}
</div>
<div>
    Total
</div>
<div>
    {{ states["Total"] }}
</div>