$watch and $digest

Messing around with $watch and $digest in angular

by Marcus Baptiste

HTML

<div ng-app="myapp" ng-controller="myctrl">
  name<br>
  <input type="text" ng-model="name"><br>
  surname<br>
  <input type="text" ng-model="surname">
  <p>The model for name has been updated  {{ num }} times</p>
  <button id="btn">reset name</button>
  <button id="btn2">reset surname</button>
</div>

JavaScript

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

myapp.controller('myctrl', function($scope) {
	$scope.num = 0;
  
  $scope.$watch('name', function() {
  	$scope.num += 1;
  }); 
  
  document.getElementById('btn').addEventListener('click', function() {
  	$scope.name = "";
    $scope.$digest();
  }, false);
  
  document.getElementById('btn2').addEventListener('click', function() {
  	$scope.surname = "";
  });
});