JSFiddle - React, Tailwind, and code Playground

Update Scope

by pmamode

HTML

<body ng-app="myApp" ng-controller="myCtrl">

  <select ng-model="configuration.safety_monitor" ng-options="option.name for option in data.availableOptions" ng-change="change(option.name)"></select>{{test}}
  <br>
  <br>

  <form action="#" method="post" class="" id="projectInfo">
    <fieldset>
      <legend>Safety Related Requirements</legend>
      <div>
        <input type="checkbox" ng-model="configuration.safety_monitor" />
        <span ng-class="{ 'highLight': highLightedItem.selected == 'safety_monitor' }" ng-click="highLight('safety_monitor')">Safety Related</span>
      </div>
    </fieldset>
  </form>
  <br>
  <div>SAFETY_MONITOR: {{configuration.safety_monitor}}</div>
  <br>

  <li ng-hide="configuration.safety_monitor"><span ng-class="{ 'highLight': highLightedItem.selected == 'safety_monitor' }" ng-click="highLight('safety_monitor')">This monitor is configured as non-safety related.</span</li>
            <li ng-show="configuration.safety_monitor"><span ng-class="{ 'highLight': highLightedItem.selected == 'safety_monitor' }" ng-click="highLight('safety_monitor')">This monitor is configured as safety related.</span></li>

</body>

JavaScript

var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {

        $scope.test = 1;
        $scope.change = function(x) {
        $scope.test = $scope.test + 1 + x;
        $scope.$apply(function() {
            $scope.configuration.safety_monitor = x+1;
          });
        }
        
        $scope.configuration = {
          safety_monitor: null,
          availableOptions: [{
            id: '1',
            value: true,
            name: true
          }, {
            id: '2',
            value: false,
            name: false
          }]
        };

        $scope.data = {
          model: null,
          availableOptions: [{
            value: true,
            name: 'Safety'
          }, {
            value: false,
            name: 'Non-safety'
          }]
        };


        $scope.updateConfiguration = function() {
          $scope.$apply(function() {
            $scope.configuration.safety_monitor = "test";
          });
        };

      });