Check in controller which input element has been modified - angularjs

Question

I need to check which input element has modified in update form.
<form name="utilizationForm" role="form" novalidate>
<div class="row" data-ng-repeat="i in [1,2,3,4]">
<div class="col-md-3">
<div asterick class="form-group" ng-class="{'form-group has-success': !error['resource_type'] && (submitted), 'form-group has-error': (error['resource_type']) && (submitted)}">
<label for="resourceType">Resource Type</label>
<input type="hidden" name="id" id="id" class="form-control" ng-model="data['id' + i]" value="">
<select name="resourceType" id="resourceType" ng-model="data['resource_type' + i]" class="form-control" ng-required="true" >
<option ng-repeat="option in resourceTypeJson" value="{{option}}">{{option}}</option>
</select>
<span class="er-block" ng-show="utilizationForm.resourceType.$touched && utilizationForm.resourceType.$error.required">Please provide Resource type.</span>
<span ng-show="error.resource_type1" class="er-block">{{error.resource_type1}}</span>
</div>
</div>
<div class="col-md-3">
<label for="efforts">Efforts (in hours)</label>
<input type="hidden" name="id" id="id" class="form-control" ng-model="data['id' + i]" value="">
<input type="text" test-change name="efforts" id="efforts" class="form-control" ng-model="data['efforts' + i]" value="">
</div>
</div>
<div class="text-right" ng-class="{'col-md-6 mt25': showCompletion}">
<button class="btn btn-primary" ng-disabled="utilizationForm.$invalid" ng-click="addUtilizationReport()">{{buttonText}}</button>
</div>
</form>
Now when I click on update button I need to check which input element has modified in update form in controller. Please help.

Answer 1

If you put the input in a form with a name attribute and then give the input a name attribute, you can also access the input's $dirty property.
<div ng-controller="MyController">
<form name="myForm">
<input type="text" name="first" ng-model="firstName">
<input type="text" name="last" ng-model="lastName">
</form>
</div>
app.controller('MyController', function($scope) {
// Here you have access to the inputs' `$dirty` property
console.log($scope.myForm.first.$dirty);
console.log($scope.myForm.last.$dirty);
});
You can use $scope.myForm.$dirty to see if any fields have changed, and the $dirty property on each input's property on the form to see if that input has changed. You can even iterate over the myForm object (non-input-field objects have keys prefixed with a $):
angular.forEach($scope.myForm, function(value, key) {
if(key[0] == '$') return;
console.log(key, value.$dirty)
});

Answer 2

Here is simplest example of using $watch in controller:
var app = angular.module('myApp', []);
app.controller('appCtrl', function($scope, $location) {
$scope.$watch('abc', function(newVal,oldVal) {
if(oldVal != newVal){
alert("value changed!");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="appCtrl">
<input type="text" name="first" ng-model="abc">
</div>