Angular $watch w/ Controller AS

by MikeBridge116

HTML

<div ng-app="myApp" ng-controller="myController as myctrl">
    <ul>
        <li ng-repeat="contact in myctrl.contacts">
            <input type="text" ng-model="contact.name.first" />
        </li>
    </ul>
</div>

JavaScript

angular.module('myApp',[])
.controller('myController',['$scope','contacts',function($scope,contacts) {
    this.contacts = contacts;
    
    $scope.$watch(function() { return contacts; }, function(newValue, oldValue) {
       console.log({older: oldValue, newer:newValue});
    },true);
    
}])
.factory('contacts',function() {
   return [
      {
        "_id": "540f0d1c29d786a159f9a27e",
        "name": {
          "first": "Francis",
          "last": "Strong"
        },
        "company": "ZILLAN",
        "email": "francis.strong@zillan.com",
        "phone": "+1 (921) 507-2998"
      },
      {
        "_id": "540f0d1cf078b6b0cf3ac56f",
        "name": {
          "first": "Johanna",
          "last": "Rosario"
        },
        "company": "GLASSTEP",
        "email": "johanna.rosario@glasstep.ca",
        "phone": "+1 (958) 425-3942"
      },
      {
        "_id": "540f0d1ca9f02d45ef22f677",
        "name": {
          "first": "Good",
          "last": "Carr"
        },
        "company": "TUBALUM",
        "email": "good.carr@tubalum.tv",
        "phone": "+1 (993) 435-3171"
      }
    ]; 
});