title: ng-dirty is not working as expected
body: <p>I am having tough time in understanding why my element shows <code>ng-dirty</code> after updating the model.</p>
  
  <p>I have a collection of bridges which need to be rendered on UI.  On each tab click, I am changing the index and rendering the data.</p>
  
  <ol>
  <li><p>If my first tab data has changed and moved to second tab why are input elements still dirty on second tab. (Function -  <code>$scope.changeIndex</code>)</p></li>
  <li><p>After executing calculate, the model gets updated but still the input elements are still dirty</p></li>
  </ol>
  
  <p>UI</p>
  
  <pre><code>&lt;td style="padding:10px;text-align:center"&gt;
      &lt;label&gt;Length:&lt;/label&gt;
      &lt;input type="text" class="currencyLabel-editable" ng-model="bridgeModel.bridges[currentIndex].length" /&gt;
  &lt;/td&gt;
  
  &lt;td style="padding:10px;text-align:center"&gt;
      &lt;label&gt;Width:&lt;/label&gt;
      &lt;input type="text" class="currencyLabel-editable" ng-model="bridgeModel.bridges[currentIndex].width" /&gt;
  &lt;/td&gt;
  
  &lt;td style="padding:10px;text-align:center"&gt;
      &lt;label&gt; Skew:&lt;/label&gt;
      &lt;input type="text" class="currencyLabel-editable" ng-model="bridgeModel.bridges[currentIndex].skew" /&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>(function () {
  
  
  var bridgeCtrl = function ($scope, $bootstrapBridgeData, $crudService,$log) {
  
  
      $scope.bridgeModel = $bootstrapBridgeData.bridgeModel;
  
  
      var onCalculateComplete = function (data) {
          $scope.bridgeModel.bridges[$scope.currentIndex] = angular.copy(angular.fromJson(data));
  
      }
  
      var onCalculateError = function (reason){
          $scope.error = "Unable to perform calculation";
          $log.error(reason);
      }
  
      var onError = function (reason) {
          $scope.error = "Unable to fetch data";
      }
  
  
  
      //function to null the values which needs to be re-computed
      var removeCalculatedValues = function () {
  
  
          $scope.bridgeModel.bridges[$scope.currentIndex].foundation_PreBoringCalculated = null;
          $scope.bridgeModel.bridges[$scope.currentIndex].foundation_DrilledShaftsCalculated = null;
  
      }
  
      //function to compute the bridge values
      $scope.calculate = function (url) {
  
          if (!preValidation()) {
              return false;
          }
  
          removeCalculatedValues();
  
          $crudService.postAndGetData(url, $scope.bridgeModel.bridges[$scope.currentIndex])
                       .then(onCalculateComplete, onCalculateError)
  
  
      }
  
      //function to select the bridge and change the index of the bridge
      $scope.changeIndex = function (bridgeName,index) {
           $scope.selectedBridge = bridgeName;
           $scope.currentIndex = index;           
      }
  
      $scope.save = function (index, url) {
  
          $scope.currentIndex = index;
          crudService.postAndGetData(url, $scope.bridges[index])
                     .then(onUserComplete, onError);
  
      }
  
      //$scope.enableSave = function isFormDirty() {
  
      //    if ($(".ng-dirty").length) {
      //        return false;
      //    }
      //    else { return true; }
      //}
  
      //Behaviour Changes
  
  
      //function which changes the css 
      $scope.isBridgeSelected = function (bridge) {
          return $scope.selectedBridge === bridge;
      }
  
      var preValidation = function () {
  
          if ($(".ng-invalid").length) {
              alert("Please correct the errors.")
              return false;
          }
          else { return true;}
      }
  
  
  
  }
  
  
  //Get the module and add a controller to it
  var module = angular.module("bridgeModule");
  module.controller("bridgeCtrl", bridgeCtrl);
  
  }());
  </code></pre>