Angular ng-class bug

class should change when model changes

by Todd

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div data-ng-app="app">
  <div class="container" data-ng-controller="appCntrl">
    <form id="existing-parameter" class="form" name="formDetails" novalidate>
      <div class="form-group-lg">
        <label>Name</label>
        <br/>
        <textarea name="description" id="param-description" class="form-control" 
        data-ng-model="paramDetails.name" 
        data-ng-required="true" 
        data-ng-class="{'nochange': paramDetails.name==paramDetailsCopy.name}"
        ></textarea>
      </div>
      <!-- History Selector -->
      <div class="form-group-lg">
        <label>
          History
          <span>(selection will be copied into form)</span>
        </label>
        <br/>
        <select id="history" 
          data-ng-model="paramHistory.selected" 
          data-ng-selected="paramHistory.selected" 
          data-ng-change="showHistory()" 
          data-ng-class="{'nochange': paramHistory.selected==paramHistory.data[0].start}">
          <option data-ng-repeat="option in paramHistory.data" value="{{option.start}}">
            {{option.start}}
          </option>
        </select>
        <p>
        When history selector goes green the name text area should also be green.
        </p>
      </div>
    </form>
  </div>
</div>

SCSS

$formBack: white;
$formDirtyValid: lightgreen;
$formDirtyInvalid: red;

.ng-empty, .form-control.ng-dirty.ng-invalid {
  background-color: $formDirtyInvalid;
  color: $formBack;
}

.form-control.ng-dirty.ng-valid, select.ng-dirty.ng-valid {
  background-color: $formDirtyValid;
}

.form-control.ng-dirty.ng-valid.nochange, select.ng-dirty.ng-valid.nochange {
  background-color: $formBack ;
}

JavaScript

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

app.controller('appCntrl', ['$scope', function($scope) {

  $scope.paramDetails = {
    name: 'Name 1'
  };
  $scope.paramDetailsCopy = {
    name: 'Name 1'
  };

  $scope.paramHistory = {
    selected: "2017-11-01",
    ok: false,
    error: 'Some Error',
    data: [{
      start: "2017-11-01",
      name: 'Name 1'
    }, {
      start: "2017-10-12",
      name: 'Name 2'
    }]
  };

  $scope.showHistory = function() {
    var data = $scope.paramHistory.data;
    var i;
    for (i in data) {
      if (data[i].start === $scope.paramHistory.selected) {
        $scope.paramDetails.name = data[i].name;
        break;
      }
    }
  };

}]);