title: Using $watch method in AngularJS
body: <p>I'm following the book "Pro AngularJS" by Adam Freeman. But I'm stuck at listing 15-10. The code he provided doesn't work at all. </p>
  
  <p>The demo code is below. It's supposed to work in the following manner: when we click on the button to modify the prices, this list must update automatically. Would you please let me know how to fix his code? I've googled a lot but ....</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="exampleApp"&gt;
  &lt;head&gt;
      &lt;script src="angular.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="bootstrap.css"/&gt;
      &lt;link rel="stylesheet" href="bootstrap-theme.css"/&gt;
      &lt;script&gt;
          angular.module("exampleApp", [])
                  .controller('defaultCtrl', function ($scope) {
                      $scope.products = [
                          {name: "Apples", category: "Fruit", price: 1.20, expiry: 10},
                          {name: "Bananas", category: "Fruit", price: 2.42, expiry: 7},
                          {name: "Pears", category: "Fruit", price: 2.02, expiry: 6}
                      ];
                      $scope.incrementPrices = function(){
                          for(var i=0; i&lt; $scope.products.length; i++){
                              $scope.products[i].price += 1;
                          }
                      }
                  })
                  .directive("unorderedList", function () {
                      return function (scope, element, attrs) {
                          var data = scope[attrs["unorderedList"]];
                          var propertyExpression = attrs["listProperty"];
  
                          if (angular.isArray(data)) {
                              var listElem = angular.element("&lt;ul&gt;");
                              element.append(listElem);
                              for (var i = 0; i &lt; data.length; i++) {
                                  var itemElement = angular.element('&lt;li&gt;');
                                  listElem.append(itemElement);
                                  var watcherFn = function (watchScope) {
                                      return watchScope.$eval(propertyExpression, data[i]);
                                  }
                                  scope.$watch(watcherFn, function (newValue, oldValue) {
                                      itemElement.text(newValue);
                                  });
                              }
                          }
                      }
                  })
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="defaultCtrl"&gt;
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h3&gt;Products&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;button class="btn btn-primary" ng-click="incrementPrices()"&gt;Change prices&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;div unordered-list="products" list-property="price | currency"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>