angular log watch user input for any change

Question

app.controller("ListController", ['$scope', function($scope) {
$scope.personalDetails = [
                    {
                        'fname':'Muhammed',
                        'lname':'Shanid',
                        'email':'shanid@shanid.com',
                        'method':'66666',
                        'date':'08/08/20117',
                        //'specieSelected':'ALLIGATOR JUNIPER'
                        'specieSelected':{
                                            'originalObject': {'code':'','name':'ACACIA SPECIES'},
                                            'title':'ALLIGATOR JUNIPER'

                                            }

                    },

I have complex variable and multi field. by add personalDetails to watch, the console log does not get fired for every user input. For example, user change fname, I want log it. but it does not.

$scope.$watch('personalDetails', function() {
                            console.log($scope.personalDetails);



                        }); 

Answer 1

   angular.module('MY_APP', []).controller('MyCtrl', MyCtrl)
   function MyCtrl($scope,$timeout) {
   $scope.users = [{"name": "vinoth"},{"name":"yusuf"},{"name":"rajini"}];

   $scope.$watch("users", function() {
      console.log("**** reference checkers $watch ****")
   });

   $scope.$watchCollection("users", function() {
    console.log("**** Collection  checkers $watchCollection ****")
   });

  $scope.$watch("users", function() {
      console.log("**** equality checkers with $watch(true) ****")
  }, true);

 $timeout(function(){
    console.log("Triggers All ")
    $scope.users = [];
    $scope.$digest();

     console.log("Triggers $watchCollection and $watch(true)")
    $scope.users.push({ name: 'Thalaivar'});
    $scope.$digest();

    console.log("Triggers $watch(true)")
     $scope.users[0].name = 'Superstar';
     $scope.$digest();
   });
 }

if you want to watch or console log every user input, you should use equality watches, which has true parameter in the third place.

   $scope.$watch('personalDetails', function() {
                            console.log($scope.personalDetails);

                            }, true);